vue CheckBox全选和反选

通过一段时间vue学习。自己模拟练习了CheckBox的全选的反选希望对大家有用##<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name=&quo

bossxu_

4319人浏览 · 2018-05-23 22:30:15

bossxu_ · 2018-05-23 22:30:15 发布

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^