Vue.js实现checkbox的全选和反选
html<template><div class="hello"><ul><li v-for="(item, index) in proData"><label for=""><input type="checkbox" :value="item.name" v-mode
·
html
<template>
<div class="hello">
<ul>
<li v-for="(item, index) in proData">
<label for="">
<input type="checkbox" :value="item.name" v-model="selectArr">
</label>{{item.name}}
</li>
:
</ul>
<button type="" @click="del">删除</button>
{{selectArr}}
<label>
<input type="checkbox" class="checkbox" @click="selectAll"/>全选
</label>
</div>
</template>
js
<script>
var proData = [{
"name": "aaaaaaaaaa"
}, {
"name": "bbbbbbbbbb"
}, {
"name": "cccccccccc"
}, {
"name": "dddddddddd"
}]
export default {
name: 'hello',
data: function() {
return {
proData: proData,
selectArr: []
}
},
methods: {},
watch: {//深度 watcher
},
created() {
this.$http.get('').then(function(response) {
response = response.body;
this.proData = response.data;
})
},
methods: {
del() {
var arr = [];
var len = this.proData.length;
for(var i = 0; i < len; i++) {
if(this.selectArr.indexOf(i) >= 0) {
console.log(this.selectArr.indexOf(i))
} else {
arr.push(proData[i])
}
}
this.proData = arr;
this.selectArr = []
},
selectAll(event) {
var _this = this;
console.log(event.currentTarget)
if(!event.currentTarget.checked) {
this.selectArr = [];
} else { //实现全选
_this.selectArr = [];
_this.proData.forEach(function(item, i) {
_this.selectArr.push(item.name);
});
}
}
}
}
</script>
更多推荐
已为社区贡献21条内容
所有评论(0)