说明: 页面使用BootStrap框架搭建
<div id="app">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">全选和反选</h3>
</div>
<div class="panel-body">
<div class="checkbox">
<label>
<input type="checkbox" v-model="chkAll" />
全选
</label>
</div>
<ul class="list-group">
<li class="list-group-item"
v-for="(item) in list" :key="item.id">
<div class="checkbox">
<label>
<input type="checkbox" v-model="item.checked" />
{{item.name}}
</label>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="./libs/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
list: [
{
id: 1,
name: "胡一菲",
checked: false,
},
{
id: 2,
name: "诺澜",
checked: false,
},
{
id: 3,
name: "曾小贤",
checked: false,
},
{
id: 4,
name: "张益达",
checked: false, //默认不选中
},
{
id: 5,
name: "诸葛大力",
checked: true, //默认选中
},
],
},
// computed计算属性:依赖的数据项改变之后进行重新计算
// 应用场景:数据改变之后会影响某一项结果
computed: {
chkAll: {
// 设置值,当点击全选按钮的时候触发
set(v) {
this.list.forEach((item) => (item.checked = v));
},
// 取值,当列表中的选择改变之后触发
get() {
return (
this.list.length ===
this.list.filter((item) => item.checked).length
);
},
},
},
});
</script>
实现效果: