Question

vuejs怎样实现列表中checkbox的双向绑定及初始化渲

Answer 1

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

<input type="checkbox" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames | json }}</span>

这样可以不做任何处理，获得所有checked的checkbox。

2.可是如果需要初始化渲染，一部分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'}]
}
});

• Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

• 另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

Answer 2

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

<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)
}
}