<template>
<div>
<div>
<span>全选</span>
<input type="checkbox" v-model="all"/>
<button @click="fanFn">反选</button>
</div>
<ul>
<li v-for="(obj,index) in arr" :key="index">
<input type="checkbox" v-model="obj.checked">
<span>{{obj.name}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
name: "猪八戒",
checked: false,
},
{
name: "孙悟空",
checked: false,
},
{
name: "唐僧",
checked: false,
},
{
name: "白龙马",
checked: false,
},
],
};
},
computed: {
all:{
set(val){
return this.arr.forEach(obj => obj.checked = val)
},
get(){
//every()是数组的方法
//遍历数组的每一项,找到第一个不符合条件的,直接原地返回一个false
return this.arr.every(obj => obj.checked == true)
}
}
},
methods: {
fanFn(){
return this.arr.forEach(obj => obj.checked = !obj.checked)
}
}
};
</script>