本文介绍如何使用Vue.js实现全选功能，通过计算属性监听所有复选框的状态，确保全选框状态同步更新。点击全选后，所有子复选框的值将与全选框保持一致。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
全选 <input type="checkbox" v-model='checkAll'>
<input type="checkbox" v-for = "(item,key) in checks" v-model = 'item.value':key='key'>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
checks:[{value:true},{value:false},{value:true}]
},
computed:{
checkAll:{
get(){
return this.checks.every(function(item){
return item.value
})
},
set(value){
this.checks.forEach(element => {
element.value = value
});
}
}
}
});
</script>
这里全选定义计算属性，这样它的值的变化受到其他checkbox的影响，这里先返回各个checkbox的value的值，图像如下：
当点击全选后让所有的checkbox的值和全选的value值相同，这样就实现了全选全不选的功能。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
