vuejs实现checkbox全选和全不选 - 好文

最近一直在用vue，有个功能是要实现全选和取消全选的功能，于是想了一下要怎么做。

效果如下：

代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
vue实现checkbox全选和全不选</title> <script type="text/javascript" src=
"../lib/vue.min.js"></script> <script type="text/javascript" src=
"../lib/jquery-1.11.3.min.js"></script> <style> #table { width:600px; height:200
px; margin:100px auto; } #table label{ padding:10px; font-size:16px; border:1px
solid#ccc; } #table label input{ height:20px; width:20px; } #table .active{
color:red; } </style> </head> <body> <div id="table"> <p> <label :class=
"check.length == ball.length ? 'active' : ''"><input type="checkbox" v-model=
"all.flag" @click.stop="allchoosed()">{{all.label}}</label> </p> <p> <label
v-for="(item, index) in ball"><input type="checkbox" v-model="check" :value=
"item.id" @click.stop="checkChoose()">{{item.label}}</label> </p> <h1>提交的id数组：{{
check}}</h1> </div> </body> </html> <script> var v = new Vue({ el: "#table",
data: { check: [], ball: [{ id:1, label: '篮球', flag: false },{ id: 2, label:
'足球', flag: true },{ id: 3, label: '乒乓球', flag: false },{ id: 4, label: '桌球',
flag:true }], all:{ flag: false, label: '全选' } }, methods: { checkChoose:
function() { var _this = this; _this.all.flag = (_this.check.length ==
_this.ball.length) ?true : false; _this.all.label = (_this.check.length ==
_this.ball.length) ?'取消全选' : '全选'; }, allchoosed: function(){ var _this = this;
if(_this.all.flag){ _this.check = []; _this.ball.forEach(function(item, index){
_this.check.push(item.id); }); _this.all.flage =true; _this.all.label = '取消全选';
}else{ _this.ball.forEach(function(item, index){ _this.check = []; });
_this.all.flage =false; _this.all.label = '全选'; } } }, created: function(){ var
_this =this; var flag = true; //载入时判断是否为全选状态 _this.ball.forEach(function(item,
indx){ if(item.flag){ _this.check.push(item.id); } }); _this.all.flag =
(_this.check.length == _this.ball.length) ?true : false; _this.all.label =
(_this.check.length == _this.ball.length) ?'取消全选' : '全选'; } }); </script>

热门工具换一换