表单绑定
1. 双向绑定
注意: input 的 type 类型必须声明是哪种类型(text,radio,checkbox)等.
示例:
page.message有 3 个地方用到,b-model,b-text,b-click点击的时候,也会拿到message去做处理.
var bs = bui.store({
scope: "page",
data: {
message: "Hello bui.js",
},
methods: {
reverseMessage: function (e) {
var a = this.message.split(" ").reverse().join(" ");
this.message = a;
},
},
});
<div id="searchbar" class="bui-searchbar bui-box">
<div class="span1">
<div class="bui-input">
<i class="icon-search"></i>
<input
type="text"
value=""
placeholder="请输入关键字"
b-model="page.message"
/>
</div>
</div>
</div>
<div class="section-title">
正在输入:
<span class="result" b-text="page.message"></span>
<div class="bui-btn" b-click="page.reverseMessage">反序输入值</div>
</div>
效果预览
b-model的值支持 3 种数据类型
- 字符串: 用于单选或输入
- 布尔值: 用于多选
- 数组: 用于多选
2. 单选双向
page.sex的值是string, 会先设置回对应的value="女"的 input, name 的值的 sex1 不是必须的, 这个是 h5 用来对选择进行分组的.b-text用来输出当前的选中值.
var bs = bui.store({
scope: "page",
data: {
sex: "女",
},
});
<label
><input type="radio" name="sex1" value="男" b-model="page.sex" />男</label
>
<label
><input type="radio" name="sex1" value="女" b-model="page.sex" />女</label
>
性别: <span b-text="page.sex"></span>
3. 多选双向
多选是一个数组, 里面的值会跟自己本身的值进行比较,如果一致,会是选中状态.
b-text输出数组会加上逗号.
var bs = bui.store({
scope: "page",
data: {
citys: ["广州", "深圳"],
},
});
<label
><input
type="checkbox"
name="city"
value="广州"
b-model="page.citys"
/>广州</label
>
<label
><input
type="checkbox"
name="city"
value="汕头"
b-model="page.citys"
/>汕头</label
>
<label
><input
type="checkbox"
name="city"
value="深圳"
b-model="page.citys"
/>深圳</label
>
<label
><input
type="checkbox"
name="city"
value="东莞"
b-model="page.citys"
/>东莞</label
>
<div class="section-title">多选: 城市: <span b-text="page.citys"></span></div>
4. 状态联动
当
b-model的值是布尔值时, 加上b-show可以根据数据的状态来控制当前元素的显示或者隐藏.
var bs = bui.store({
scope: "page",
data: {
show: true,
},
});
<!-- 初始化显示 -->
<p b-show="page.show">我是A,被控制的内容</p>
<!-- 初始化隐藏 -->
<p b-show="!page.show">我是B,跟A相反的状态</p>
<label
><input type="checkbox" b-model="page.show" />点击可以控制A和B:
<span b-text="page.show"></span
></label>
效果预览
5. 选择列表
下面只是展示 select 的用法, 实际上移动端我们一般使用
bui.select控件.
单选
var bs = bui.store({
scope: "page",
data: {
selected: "B", // 单个select初始化的值
options: [
// 单选多选的数据源
{ text: "One", value: "A" },
{ text: "Two", value: "B" },
{ text: "Three", value: "C" },
],
},
templates: {
tplSelect: function (data) {
var html = "";
data.forEach(function (item, i) {
// value 属性必须有
html += `<option value="${item.value}">${item.text}</option>`;
});
return html;
},
},
});
<select
b-model="page.selected"
b-template="page.tplSelect(page.options)"
></select>
<span>Selected: <b b-text="page.selected"></b></span>
多选
只是把选择项变成了数组, 把
select加多了个属性multiple.
var bs = bui.store({
scope: "page
data: {
multipleSelectes: ["A","B"], // 多选select初始化的值是一个数组
options: [ // 单选多选的数据源
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
},
templates: {
// 单选多选共用模板
tplSelect: function (data) {
var html ='';
data.forEach(function (item,i) {
// value 属性必须有
html +=`<option value="${item.value}">${item.text}</option>`
})
return html;
}
}
})
<select
b-model="page.multipleSelectes"
multiple
b-template="tplSelect(page.options)"
b-command="append"
>
<option disabled value="">请选择</option>
</select>
<span>Selected: <b b-text="page.multipleSelectes"></b></span>
这里会有个
b-command属性,用来告诉模板第 1 次渲染的时候使用什么方法?
- html 替换数据
- append 在后面增加数据
- prepend 在前面增加数据
单选联动
联动的示例,增加了事件绑定,
$index是内置对象,代表点击当前 dom 的索引, 有意思的是, 这里为什么是$index而不是i?i是每次都从 0 开始的, 当数据有增删改以后, 索引值是不确定的, 而$index是根据你当前的 dom 所在的索引, 这个跟数组的索引是一一对应的. 更多内置对象,请查看事件绑定章节.
var bs = bui.store({
scope: "page",
data: {
selectA: [
// 联动select的数据源
{ text: "One", value: "A" },
{ text: "Two", value: "B" },
{ text: "Three", value: "C" },
],
selectB: [],
},
methods: {
addToB: function (index) {
this.selectB.push(this.selectA[index]);
this.selectA.splice(index, 1);
},
addToA: function (index) {
this.selectA.push(this.selectB[index]);
this.selectB.splice(index, 1);
},
},
templates: {
tplSelectA: function (data) {
var html = "";
data.forEach(function (item, i) {
// value 属性必须有
html += `<option value="${item.value}" b-click='page.addToB($index)'>${item.text}</option>`;
});
return html;
},
tplSelectB: function (data) {
var html = "";
data.forEach(function (item, i) {
html += `<option value="${item.value}" b-click='page.addToA($index)'>${item.text}</option>`;
});
return html;
},
},
});
<div class="bui-box">
<div class="span1">
<select
b-template="page.tplSelectA(page.selectA)"
class="bui-select"
multiple
></select>
</div>
<div class="span1">
<select
b-template="page.tplSelectB(page.selectB)"
class="bui-select"
multiple
></select>
</div>
</div>
效果预览
多选联动
这个例子是一个自定义的模拟 select, 我们放在综合案例里面讲.