Vue中实现列表 checkbox 的双向绑定 及 初始化渲染

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

<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。

---

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