Code operation 1 for select-all and inverse-select
: The computed property must be associated with at least one responsive data data. When the responsive data changes, the computed property changes. Recommended Use.
Example 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>
Example 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>
Two: watch listener mode: monitor the data in the data.
Note: The select all button cannot be put into watch monitoring here, because its change is determined by the change of checkList, and the monitoring will be affected all the time, resulting in wrong results.
watch is generally used for monitoring routing, special processing of the value of the input input box, etc. It is more suitable for the scenario where one data affects multiple data
<!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>
Three: @click click event method: add a click event checkAll to the select all button, and change the click state of the option when the select all button is clicked. The option buttons below are wrapped in a div and add a change event to listen for all selections.
Note: After the click event is clicked, the data in the view has not been updated to the data data, so the data data is not the latest state and needs to be reversed. The change event is only executed when the data bound to the view has changed.
<!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>