全选思路
-
准备标签,样式,js,准备数据
-
将数据循环展示在页面上, 在li 里v-for
-
在全选框 v-model = "isAll" //总的状态
-
小选框 v-model = "" //单个的状态
-
小选影响全选 ... 定义计算属性 isAll 统计小选框的状态, every查找数组里不符合条件的,直接返回false ...判断每一个小选框的状态, 只要有一个小选框的状态不为true 就是没有被勾上, 那就返回false , 全选框的状态就是false
-
全选影响小选... set(val) 设置全选的状态(true/false)...然后就遍历每个小选框看小选框的状态,让它的状态改为val全选的状态
<template> <div> <span>全选:</span> <input type="checkbox" v-model="isAll" /> <button @click="btn">反选</button> <ul> <li v-for="(obj, index) in arr" :key="index"> <input type="checkbox" v-model="obj.c" /> <span>{ { obj.name }}</span> </li> </ul> </div> </template> <script> export defa