实例，用computed 计算属性，来进行全选和反选
看图 要求，点击全选按钮实现内容全选，，再次点击全不选。点击内容全部选中时，全选按钮也选中，否则就不选中
代码如下
<div id="app">
<input type="checkbox" v-model="allChecked" />全选
<ul>
<li v-for="item in list">
<input v-model="item.checked" type="checkbox" />{{item.name}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
list: [
{
id: 1,
name: "碧瑶",
checked: false,
},
{
id: 2,
name: "小凡",
checked: true, //默认选中一个
},
{
id: 3,
name: "陆雪琪",
checked: false,
},
{
id: 4,
name: "野狗道人",
checked: false,
},
],
},
methods: {},
computed: { // 计算属性
allChecked: {
// 设置值
set(val) {
// console.log(val); true /false
this.list.forEach((item) => (item.checked = val));
},
// 取值
get() {
return (
this.list.filter((item) => item.checked).length ==
this.list.length
);
},
},
},
});
</script>
就实现了