一、把数据渲染到页面

<li v-for="item in arr" :key="item.id"><input type="checkbox" v-model="item.c"/><span>{{item.name}}</span></li>

data() {return {arr: [{id:1,name: "猪八戒",c: false,},{id:2,name: "孙悟空",c: false,},{id:3,name: "唐僧",c: false,},{id:4,name: "白龙马",c: false,},],};},

二、当数据在父组件 并在父组件改变

小选框加入这个值

v-model="item.checked"/

全选框加入这个值

v-model="isAll"

函数写在computed里面

isAll:{get(){return this.arr.every(v=>v.c)//v.c是v.c===true的简写},set(val){this.arr.forEach(v=>{v.c=val})}}

三、当数据在父组件 子组件里使用、改变值

在子组件的小选框中将v-model="item.checked"改成以下内容

:checked="item.done"@change="iptChange(item.id)"

添加方法 把对应的id传给父组件

methods: {iptChange(id) {this.$emit('on-iptChange',id)},},

父组件接收方法

@on-iptChange='iptChangeFn'

父组件书写对应方法

iptChangeFn(id){let todo=this.list.find(v=>v.id==id)todo.done=!todo.done}

如果觉得《vue全选反选》对你有帮助，请点赞、收藏，并留下你的观点哦！