<div id="app">
全选<input type="checkbox" v-model="checkAll"/>
<br>
<input type="checkbox" v-for="(item,key) in checks" v-model="item.value" :key="key" / >
</div>
<script src="./vue/dist/vue.js"></script>
<script>
let vm = new Vue({
data:{
checks:[{value:true},{value:true},{value:false}]
},
computed:{
checkAll:{
// 设置点击下方复选框,控制全选按钮的选中与不选
// 返回checks每个元素的value值,有一个为false,函数停止执行,全选按钮状态为false
get() {
return this.checks.every(function(item){
return item.value;
})
},
// checkAll有新的赋值时,新的值会传到set(value)的value参数中
// 将新的全选框的值赋值给每个复选款,实现点击全选和全不选时下方复选框的状态
set(value) {
this.checks.forEach(element => {
element.value = value;
});
}
}
}
}).$mount("#app");
</script>
computed实现全选和反选
最新推荐文章于 2023-07-08 22:37:50 发布