全选反选的代码操作
一：computed 计算属性必须关联至少一个响应式data数据，响应式数据改变，计算属性就改变。 推荐使用。
实例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>计算属性(二)</title>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="allChecked" />全选/反选
<ul>
<li v-for="item in list">
<input v-model="item.checked" type="checkbox" />{
{item.name}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
list: [
{
id: 1,
name: "碧瑶",
checked: false,
},
{
id: 2,
name: "小凡",
checked: true,
},
{
id: 3,
name: "陆雪琪",
checked: false,
},
{
id: 4,
name: "野狗道人",
checked: true,
},
],
},
methods: {},
computed: {
allChecked: {
// 设置值
set(val) {
console.log(val);// true /false
this.list.forEach((item) => (item.checked = val));
},
// 取值
get() {
return (
// 判断选中的长度是否等于总长度
this.list.filter((item) => item.checked).length == this.list.length
);
},
},
},
});
</script>
</body>
</html>
实例2
<!DOCTYPE html>
<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>Document</title>
</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变化决定的，一起监听会被一直影响，导致结果不对。
watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据
<!DOCTYPE html>
<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>Document</title>
</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>
三：@click点击事件方式：全选按钮添加点击事件checkAll，点击全选按钮时改变选项的点击状态。下面的选项按钮用一个div包裹，并添加change事件来监听是否全选。
注：click事件是点击之后，视图里的数据还没有更新到data数据里，所以导致data数据不是最新的状态，需要取反。change事件是视图绑定的数据发生了改变，才会去执行。
<!DOCTYPE html>
<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>Document</title>
</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>