更新时间:2022-10-21 13:48:54
给你一个全选的例子
<div id="app">
<ol>
<li>
<span><input type="checkbox" v-model="selectAll"></th></span>
<span align="left">全选</span>
</li>
<li v-for="answer in answers">
<span>
<input type="checkbox" v-model="selected" :value="answer.id" >
</span>
<span>{{ answer.name }}</span>
</li>
</ol>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
answers: [
{ "id": 1, "name": "A" },
{ "id": 2, "name": "B" },
{ "id": 3, "name": "C" },
{ "id": 4, "name": "D" }
],
selected: []
},
computed: {
selectAll: {
get: function () {
return this.answers ? this.selected.length == this.answers.length : false;
},
set: function (value) {
var selected = [];
if (value) {
this.answers.forEach(function (user) {
selected.push(user.id);
});
}
this.selected = selected;
}
}
}
});
</script>
效果图,你实现的checkedId没显示出来而已,根据实际情况修改一下即可