Vue实现全选反选功能
整体思路:1、点击一个单选框,记录当前的下标,存入数组A中。2、定义一个空数组B,把请求到的数据赋值给这个数组。3、判断A和B的长度是否相等来实现全选和反选。下面贴出全部代码<template><div><input type='checkbox' class='input...
·
整体思路:1、点击一个单选框,记录当前的下标,存入数组A中。
2、定义一个空数组B,把请求到的数据赋值给这个数组。
3、判断A和B的长度是否相等来实现全选和反选。
下面贴出全部代码
<template>
<div>
<input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'>全选
<ul v-for='checkb in checkboxData'>
<li>
<input type='checkbox' name='checkboxinput' class='input-checkbox'
v-model='checkboxModel' :value='checkb.id'>{{checkb.value}}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
checkboxData: [{
id: '1',
value: '苹果'
}, {
id: '2',
value: '荔枝'
}, {
id: '3',
value: '香蕉'
}, {
id: '4',
value: '火龙果'
}],
checkboxModel: [],
checked: ""
}
},
methods: {
checkedAll: function() {
var _this = this;
if(this.checked) { //实现反选
_this.checkboxModel = [];
} else { //实现全选
_this.checkboxModel = [];
_this.checkboxData.forEach(function(item) {
_this.checkboxModel.push(item.id);
});
}
}
},
watch: { //深度 watcher
'checkboxModel': {
handler: function(val, oldVal) {
if(this.checkboxModel.length === this.checkboxData.length) {
this.checked = true;
} else {
this.checked = false;
}
},
deep: true
}
},
}
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)