版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cjg214/article/details/85534218
方法一：v-model 与 [{checked:true},…]
<!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">
<button @click="checkAnti">反选</button>
<button @click="checkAll">全选</button>
<button @click="checkNone">全不选</button>
喜好:
<div v-for="item in inputArr">
{{item.text}} : <input type="checkbox" value="" v-model="item.checked">
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: function () {
return {
inputArr: [
{ text: '足球', checked: true },
{ text: '篮球', checked: false },
{ text: '羽毛球', checked: false },
{ text: '游泳', checked: false },
],
}
},
methods: {
checkNone() {
this.inputArr.forEach(item => {
item.checked = false;
});
},
checkAll() {
this.inputArr.forEach(item => {
item.checked = true;
});
},
checkAnti() {
this.inputArr.forEach(item => {
item.checked = !item.checked;
});
}
}
})
</script>
</html>
方法二: v-model结合v-for,遍历[true,false,…]
<!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">
<button @click="checkAnti">反选</button>
<button @click="checkAll">全选</button>
<button @click="checkNone">全不选</button>
喜好:
<div v-for="(item,idx) in checkArr">
<input type="checkbox" value="" :checked="checkArr[idx]">
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: function () {
return {
checkArr: [true, false, false, false],
}
},
methods: {
checkNone() {
this.checkArr = this.checkArr.map(item => item = false);
// ps:this.checkArr.forEach(item => item = false);无效,求大神解答~
},
checkAll() {
this.checkArr = this.checkArr.map(item => item = true);
},
checkAnti() {
this.checkArr = this.checkArr.map(item => item = !item);
}
}
})
</script>
</html>
方法三.利用复选框checked属性
ps:分别绑定两种数据结构,都可以实现哦
<!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">
<button @click="checkAnti">反选</button>
<button @click="checkAll">全选</button>
<button @click="checkNone">全不选</button>
喜好:
<!-- <div v-for="(item,idx) in checkArr">
<input type="checkbox" value="" :checked="checkArr[idx]">
</div> -->
<div v-for="(item,idx) in inputArr">
<input type="checkbox" value="" :checked="item.checked">
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: function () {
return {
inputArr: [
{ text: '足球', checked: true },
{ text: '篮球', checked: false },
{ text: '羽毛球', checked: false },
{ text: '游泳', checked: false },
],
// checkArr: [true, false, false, false],
}
},
methods: {
checkNone() {
this.inputArr.forEach(item => {
item.checked = false;
});
// this.checkArr = this.checkArr.map(item => item = false);
},
checkAll() {
this.inputArr.forEach(item => {
item.checked = true;
});
// this.checkArr = this.checkArr.map(item => item = true);
},
checkAnti() {
this.inputArr.forEach(item => {
item.checked = !item.checked;
});
// this.checkArr = this.checkArr.map(item => item = !item);
}
}
})
</script>
</html>