vue CheckBox全选和反选

最新推荐文章于 2024-06-19 16:55:13 发布

bossxu_

最新推荐文章于 2024-06-19 16:55:13 发布

阅读量4.2k

点赞数

分类专栏： web前端开发文章标签： vue checkbox vue全选/反选 vue checkbox全选反选

本文链接：https://blog.csdn.net/bossxu_/article/details/80427433

版权

web前端开发专栏收录该内容

51 篇文章 2 订阅

订阅专栏

通过一段时间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>