<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">
<ul>
<li>
<input type="checkbox" @change="checkAllHandle" v-model="checkedAll" />全选
</li>
<li v-for="(item,i) in people" :key="i">
<input type="checkbox" @change="setOneCheckstate(i)" :checked="item.checked" />{{ item.name }}
</li>
</ul>
</div>
<script src="./libs/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
checkedAll: false,
people: [
{
checked: false,
id: 1,
name: '沈剑心'
},
{
checked: true,
id: 2,
name: '小明'
},
{
checked: false,
id: 3,
name: '小智'
},
{
checked: false,
id: 4,
name: '皮卡丘'
}
]
},
methods: {
checkAllHandle() {
this.people.foreach((item, i) => {
this.people[i].checked = this.checkedAll;
})
},
setOneCheckstate(i) {
this.people[i].checked = !this.people[i].checked;
// if (
// this.people.filter(item => item.checked).length ==
// this.people.length
// ) {
// this.checkedAll = true;
// } else {
// this.checkedAll = false;
// }
const selectedPeople = this.people.filter(function (item) {
return item.checked;
});
// 判断一下选中的数据的长度是否等于总数据的长度
if (selectedPeople.length === this.people.length) {
this.checkedAll = true;
} else {
this.checkedAll = false;
}
},
checkAllHandle() {
this.people.forEach((item, i) => {
this.people[i].checked = this.checkedAll;
});
},
}
});
</script>
</body>
</html>
vue实现简单的全选、单选问题

最新推荐文章于 2024-06-19 16:55:13 发布
