正文
vue全选和取消全选
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head><body>
<div id="app">
<div v-for="list,index in lists">
<label :for="index">
{{list.name}}<input :id="index" type="checkbox" :value="list.name" v-model="checkboxArr"> //这里注意list.name这个值一定要和checkAll函数中绑定的红色的值要一样
</label>
</div>
<label>
<input type="checkbox" class="checkbox" @click="selectAll" />{{checkAllAddTxt}}
</label>
</div>
<script src="vue.js"></script>
<script>
window.onload = function () {
var c = new Vue({
el: '#app',
data: {
checkboxArr: [],
lists: [{ // lists是从接口拿到的要遍历带有checkbox的数据
'name': ''
}, {
'name': ''
}, {
'name': ''
}, {
'name': ''
}],
checkAllAddTxt: '全选' // 作为全选 取消全选的显示文字
},
methods: {
selectAll: function (event) {
var _this = this;
if (!event.currentTarget.checked) {
this.checkboxArr = []; // 取消全选
this.checkAllAddTxt = '全选';
} else { // 实现全选
_this.checkboxArr = [];
_this.lists.forEach(function (list, i) {
_this.checkboxArr.push(list.name);
});
this.checkAllAddTxt = '取消全选';
}
}
}
});
};
</script>
</body></html>
.
