Vue实现全选全不选功能
注意：script里面的vue.js的引用文件最好自己找个线上的
<!doctype html>
<html>
<head>
<title>Check uncheck all Checkboxes with Vue.js</title>
<script src="vue.js"></script>
</head>
<body>
<div id='myapp'>
<!-- Check All -->
<input type='checkbox' @click='checkAll()' v-model='isCheckAll'> Check All
<!-- Checkboxes list -->
<ul>
<li v-for='lang in langsdata'>
<input type='checkbox' v-bind:value='lang' v-model='languages' @change='updateCheckall()'>{{ lang }}
</li>
</ul>
<!-- Print -->
<input type='button' @click='printValues()' value='Print Selected Values'>
<br>
Selected items : {{ selectedlang }}
</div>
<!-- Script -->
<script>
var app = new Vue({
el: '#myapp',
data: {
isCheckAll: false,
langsdata: ["PHP","Vue.js","AngularJS","jQuery","JavaScript"],
languages: [],
selectedlang: ""
},
methods: {
checkAll: function(){
this.isCheckAll = !this.isCheckAll;
this.languages = [];
if(this.isCheckAll){ // Check all
for (var key in this.langsdata) {
this.languages.push(this.langsdata[key]);
}
}
},
updateCheckall: function(){
if(this.languages.length == this.langsdata.length){
this.isCheckAll = true;
}else{
this.isCheckAll = false;
}
},
printValues: function(){
this.selectedlang = "";
// Read Checked checkboxes value
for (var key in this.languages) {
this.selectedlang += this.languages[key]+", ";
}
}
}
})
</script>
</body>
</html>
