通过一段时间vue学习。自己模拟练习了CheckBox的全选的反选 希望对大家有用##
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=
"viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
"X-UA-Compatible" content="ie=edge"> <title>helloworld</title> <script type=
"text/javascript" src='../assets/js/vue.js'></script> </head> <body> <h1>
helloworld 实例</h1> <hr> <div id="app"> <label><input type="checkbox" v-model=
'isok' v-on:click='demo'/> 全选/反选</label> <ul> <li v-for="item in items"> <input
type="checkbox" :value='item' v-model='itemsd' @change='demo2'/> </li> </ul> <p>
{{itemsd }}</p> </div> <script type="text/javascript"> var app=new Vue({ el:
'#app', data:{ items:[5,6,7,8,9,1,2], itemsd:[], isok:false //判断CheckBox是否选中 },
methods:{ demo:function(){ //全选/反选 debugger if( !this.isok){ //全选中 所有CheckBox
this.items.forEach(function (fruit) { debugger; this.itemsd.push(fruit); }, this
); }else{ //反选清楚所有CheckBox选中 this.itemsd=[] } }, demo2:function(){ debugger; if(
this.items.length==this.itemsd.length){ //判断每一个CheckBox是否选中 全选中让全选反选按钮选中 this
.isok=true; }else{ // 不选中 让全选反选按钮不选中 this.isok=false; } } } }) </script> </body>
</html>

友情链接
KaDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:637538335
关注微信