这是实现全选与全不选逻辑的代码,大家只要给相应的控件再加上删除逻辑就完成了全选与选不选、单选等删除功能了;这段代码经过我很多次强暴,是可以用的。
<template>
<div id="hello"><ol>
<li>
<span><input type="checkbox" v-model="selectAll"></th></span>
<span align="left">全选</span>
</li>
<li v-for="answer in answers">
<span>
<!--:value === v-bind:value=""-->
<input type="checkbox" v-model="selected" :value="answer.id" >
</span>
<span>{{ answer.name }}</span>
</li>
</ol>
</div>
</template>
<script>
import Vue from 'vue'
export default {
name: 'hello',
data:function() {
return{
answers: [
{ "id": 1, "name": "A" },
{ "id": 2, "name": "B" },
{ "id": 3, "name": "C" },
{ "id": 4, "name": "D" }
],
selected : []
} },
computed: {
selectAll: {
get: function () {//因为在set方法中改变了全局变量selected,所以get方法会被调用
console.log("getgetget");
console.log("this.answers ? ...="+this.answers ? this.selected.length == this.answers.length : false);
console.log("this.answers="+this.answers);
console.log("this.selected.length == this.answers.length:"+this.selected.length == this.answers.length);
return this.answers ? this.selected.length == this.answers.length : false
},
set: function (value) {//点击checkbox会自动调用set方法
console.log("setsetset");
var selected = [];
console.log("value="+value);
if (value) {
this.answers.forEach(function (user) {
console.log("user="+user);
console.log("user.value="+user.value);
console.log("user.id"+user.id);
selected.push(user.id);
});
}
this.selected = selected;
}
},
selectAll2:{
get:function(){
console.log("get");
},
set:function(value){
console.log("value"+value);
}
}
}
}
</script>
<style>
</style>