案例-小选影响全选
目标: 小选框都选中(手选), 全选自动选中
- 需求: 小选框都选中(手选), 全选自动选中
分析:
① 先静态后动态, 拿到静态标签和数据
② 循环生成复选框和文字, 对象的c属性和小选框的选中状态, 用v-model双向绑定
③ 定义isAll计算属性, 值通过小选框们统计c属性状态得来
图示:
模板标签和数据(直接复制在这基础上写vue代码)
<template>
<div>
<span>全选:</span>
<input type="checkbox"/>
<button>反选</button>
<ul>
<li>
<input type="checkbox"/>
<span>任务名</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
name: "猪八戒",
c: false,
},
{
name: "孙悟空",
c: false,
},
{
name: "唐僧",
c: false,
},
{
name: "白龙马",
c: false,
},
],
};
}
};
</script>
mine:
<template>
<div>
<span>全选:</span>
<input v-model="isAll" type="checkbox"/>
<button>反选</button>
<ul>
<li v-for="item in arr" :key="item.name">
<input v-model="item.c" type="checkbox"/>
<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: {
isAll (){
// every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试
// 他返回一个布尔值
// 每一个都能通过测试函数,返回true
// 碰到没通过测试函数的,就返回false,并停止
return this.arr.every(item => item.c === true)
}
}
};
</script>