首页 > 代码库 > vue checkbox 双向绑定及初始化渲染

vue checkbox 双向绑定及初始化渲染

双向绑定可以绑定到同一个数组
<input type="checkbox" id="jack" value=http://www.mamicode.com/"Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value=http://www.mamicode.com/"John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value=http://www.mamicode.com/"Mike" v-model="checkedNames">
<label for="mike">Mike</label>

<span>Checked names: {{ checkedNames | json }}</span>
这样可以不做任何处理,获得所有checked的checkbox。

可是如果需要初始化渲染,一部分checkbox被预选中,v-model需要绑定一个boolen值checked:(此时checked为数字类型的0或1也是可以的)
<tr v-for="item in list">
    <td>
        <input type="checkbox" :value=http://www.mamicode.com/"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)
    }
}

vue checkbox 双向绑定及初始化渲染