Vue中实现列表 checkbox 的双向绑定 及 初始化渲染
双向绑定可以绑定到同一个数组<input type="checkbox" value="Jack" v-model="checkedNames"><label for="jack">Jack</label><input t
·
双向绑定可以绑定到同一个数组
<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'}
]
}
});
更多推荐
已为社区贡献11条内容
所有评论(0)