为了账号安全,请及时绑定邮箱和手机立即绑定

请问该如何使用Vue.js进行列表的双向绑定?

/ 猿问

请问该如何使用Vue.js进行列表的双向绑定?

慕斯王 2019-10-28 10:06:43

如何使用Vue.js进行列表的双向绑定


查看完整描述

3 回答

?
慕标5265247

双向绑定可以绑定到同一个数组

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames | json }}</span>
这样可以不做任何处理,获得所有checked的checkbox。

可是如果需要初始化渲染,一部分checkbox被预选中,v-model需要绑定一个boolen值checked:

<tr v-for="item in list">
<td>
<input type="checkbox" :value="item.value" v-model="item.checked" />
</td>
</tr>

new Vue({
el: 'body',
data: {
list: [{checked:true,value:'a'},{checked:false,value:'b'}]
}
});
利用 filter , map 来完成

methods: {
getChecked: function() {
// 先透过 filter 筛选出 checked 为 true 的 item
// 在透过 map 只回传 item 的 value
return this.list.filter(item => item.checked).map(item => item.value)
}
}



查看完整回答
反对 回复 2019-11-02
?
犯罪嫌疑人X

如果只是分别实现双向绑定和初始化渲染,官网的例子都可以解决。 双向绑定可以绑定到同一个数组Jack、John、Mike 。
Checked names: {{ checkedNames | json }} 这样可以不做任何处理,获得所有checked的checkbox。

查看完整回答
反对 回复 2019-11-02
?
HUWWW

Map对象的连接运算符也是将两个Map对象连接成一个新的Map对象,Map对象的连接运算符是+,如果两个Map对象具有相同的key,则右边的值替代左边的值.看如下的例子:
<#assign scores = {"语文":86,"数学":78} + {"数学":87,"Java":93}>
语文成绩是${scores.语文}
数学成绩是${scores.数学}
Java成绩是${scores.Java}
输出结果是:
语文成绩是86
数学成绩是87
Java成绩是93

查看完整回答
反对 回复 2019-11-02

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信