Vue三种方式实现全选全不选：@click点击事件方式、computed计算属性方式和watch监听器方式
- @click点击事件方式：全选按钮添加点击事件checkAll，点击全选按钮时改变选项的点击状态。下面的选项按钮用一个div包裹，并添加change事件来监听是否全选。
注：click事件是点击之后，视图里的数据还没有更新到data数据里，所以导致data数据不是最新的状态，需要取反。change事件是视图绑定的数据发生了改变，才会去执行。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<input type="checkbox" value="OK" v-model="all" @click="checkAll">全选/非全选
<br>
<div @change="delegate">
<div v-for="item,index in hobbyList">
<input type="checkbox" :value="item.value" :id="item.id|handleID" v-model="checkList">
<label :for="item.id|handleID">{
{item.name}}label>
div>
div>
div>
<script src="js/vue.min.js">script>
<script type="text/javascript">
let vm1 = new Vue({
el: "#app",
data: {
hobbyList: [
{
id: 1,
name: "唱歌",
value: "sing"
},
{
id: 2,
name: "跳舞",
value: "dance"
},
{
id: 3,
name: "读书",
value: "read"
},
{
id: 4,
name: "画画",
value: "draw"
}
],
// 存储选中的兴趣爱好
checkList: [],
// 存储全选按钮的选中状态
all: []
},
filters: {
handleID(value) {
return 'hobby' + value;
}
},
methods: {
checkAll() {
// click事件处理=>下面的判断要取反
if (!this.all.includes('OK')) {
this.hobbyList.forEach(item => {
this.checkList.push(item.value);
});
}
else {
this.checkList = [];
}
},
delegate() {
this.all = this.checkList.length === 4 ? ['OK'] : [];
}
}
});
script>
body>
html>
- computed计算属性方式：计算属性必须关联至少一个响应式data数据，响应式数据改变，计算属性就改变。 推荐使用。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<input type="checkbox" v-model="selected">全选/非全选
<br>
<div v-for="item,index in hobbyList">
<input type="checkbox" :value="item.value" :id="item.id|handleID" v-model="checkList">
<label :for="item.id|handleID">{
{item.name}}label>
div>
div>
<script src="js/vue.min.js">script>
<script type="text/javascript">
let vm1 = new Vue({
el: "#app",
data: {
hobbyList: [
{
id: 1,
name: "唱歌",
value: "sing"
},
{
id: 2,
name: "跳舞",
value: "dance"
},
{
id: 3,
name: "读书",
value: "read"
},
{
id: 4,
name: "画画",
value: "draw"
}
],
// 存储选中的兴趣爱好
checkList: []
},
filters: {
handleID(value) {
return 'hobby' + value;
}
},
computed: {
// 存储全选按钮的选中状态
selected: {
get() {
return this.checkList.length === this.hobbyList.length ? true : false;
},
set(value) {
// 点击全选按钮时，修改selected的值,value存储的是选中的状态
if (value) {
this.hobbyList.forEach(item => {
this.checkList.push(item.value);
});
return;
}
this.checkList = [];
}
}
},
methods: {
}
});
script>
body>
html>
- watch监听器方式：监听的是data中的数据。
注：这里不能把全选按钮selected放入watch中监听，因为它的变化是由checkList变化决定的，一起监听会被一直影响，导致结果不对。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<input type="checkbox" v-model="selected" @change="checkAll">全选/非全选
<br>
<div v-for="item,index in hobbyList">
<input type="checkbox" :value="item.value" :id="item.id|handleID" v-model="checkList">
<label :for="item.id|handleID">{
{item.name}}label>
div>
div>
<script src="js/vue.min.js">script>
<script type="text/javascript">
let vm1 = new Vue({
el: "#app",
data: {
hobbyList: [
{
id: 1,
name: "唱歌",
value: "sing"
},
{
id: 2,
name: "跳舞",
value: "dance"
},
{
id: 3,
name: "读书",
value: "read"
},
{
id: 4,
name: "画画",
value: "draw"
}
],
// 存储选中的兴趣爱好
checkList: [],
// 存储全选按钮的选中状态
selected: false
},
filters: {
handleID(value) {
return 'hobby' + value;
}
},
watch: {
checkList() {
this.selected = this.checkList.length === this.hobbyList.length ? true : false;
}
},
methods: {
checkAll() {
if (this.selected) {
this.hobbyList.forEach(item => {
this.checkList.push(item.value);
});
return;
}
this.checkList = [];
}
}
});
script>
body>
html>