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

 我来答
折柳成萌
高粉答主

2017-09-14 · 繁杂信息太多,你要学会辨别
知道顶级答主
回答量:4.4万
采纳率:96%
帮助的人:6243万
展开全部
双向绑定可以绑定到同一个数组

<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)
}
}
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式