<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" v-model='shenm' :value="shenm" v-model='checked' url="" v-on:click='checkedAll'> 全选{{checked}}{{shenm}}
<template v-for="(list,index) in checkboxList">
<input type="checkbox" v-model='checkList' :url="list.classa" v-model='checkList' :value="list.product_inf"> {{list.product_inf}}
</template>
{{checkList}}
</div><script>
var vm = new Vue({
el: '#app',
data: {
checkboxList: [{
'id': '1',
'product_inf': '女士银手链',
'classa':'class1'
}, {
'id': '2',
'product_inf': '女士银手镯',
'classa':'class2'
}, {
'id': '3',
'product_inf': '女士银耳环',
'classa':'class3'
}],
checked: false, //全选框
checkList: [],
shenm:'这是'
},
methods: {
checkedAll: function() {
var _this = this;
console.log(_this.checkList);
console.log(_this.checked);
if (!_this.checked) { //实现反选
_this.checkList = [];
} else { //实现全选
_this.checkList = [];
this.checkboxList.forEach(function(item, index) {
alert(item.id);
_this.checkList.push(item.id);
});
}
}
},
watch: {
'checkList': {
handler: function(val, oldVal) {
if (val.length === this.checkboxList.length) {
this.checked = true;
} else {
this.checked = false;
}
},
deep: true
}
},
})
</script>
</body>
</html>
网友评论