vue实现多选框全选功能。如下,勾选时表示事情已处理完。
html部分
<div>
<ul>
<li v-for="(todo, index) in todoList" :key="index">
<input type="checkbox" v-model="todo.done">
{{todo.title}}
</li>
</ul>
全选<input type="checkbox" v-model="allDone">
</div>
可以直接用计算属性computed来实现
data() {
return {
todoList: [
{ title: "吃饭", done: false },
{ title: "睡觉", done: true },
],
};
},
computed: {
allDone:{
get: function() {
return this.active === 0;
},
set: function(val) {
return this.todoList.forEach(todo => {
todo.done = val;
});
}
}
},