小选框手选都选中, 全选自动选中
效果展示:
代码展示:
<template>
<div>
<h1>爱吃的水果</h1>
<span>全选:</span>
<input type="checkbox" v-model="isAll" />
<br>
<!-- 5.给反选按钮绑定点击事件 -->
<button @click="revBtn">反选</button>
<ul>
<!-- 1.利用v-for遍历arr -->
<li v-for="(item, index) in arr" :key="index">
<!-- 2.多选框v-model绑定一个非数组 关联的是checked -->
<input type="checkbox" v-model="item.c"/>
<span>{{item.name}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
name: "苹果",
c: false,
},
{
name: "香蕉",
c: false,
},
{
name: "橘子",
c: false,
},
{
name: "樱桃",
c: false,
},
],
};
},
computed: {
// 4. 因为获取不到isAll的值 所以用全量的写法
isAll : {
// 3.统计小选框状态 -> 全选
// every口诀: 查找数组里"不符合"条件, 直接返回false
// every:一假即假, some:一真即真
set(val) {
console.log(val)
// 遍历arr 把 val赋值给c属性
this.arr.forEach(obj => {
obj.c = val
});
},
get() {
return this.arr.every(obj => obj.c === true)
}
}
},
methods: {
revBtn () {
// 遍历数组 给每一个c属性取反 true 取反 就变成了 false
this.arr.forEach(obj => {
obj.c = !obj.c
});
}
}
};
</script>