vue实现简单的全选、反选、不选 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">      
        喜欢的城市
        <hr>
        <div v-for="item in arr">           
            {{item.city}}
            <input type="checkbox" value="" v-model="item.checked">
        </div>
        <br />
        <button @click="checkall">全选</button>
        <button @click="inverse">反选</button>
        <button @click="uncheckall">全不选</button>
    </div>
    <script>  
    /*
    
        *** v-model中只能传数据变量

        不能写成v-model = "true"、v-model = "{b:true}"  报错
           
        只能用数据
            v-model = "数据"

        ***在v-for中如果要循环数组，还要使用v-model,
        那么model中的值，应该传成arr[key],在改变数据的时候
        使用赋值的方式更改数据。


        如果是对象，不能使用赋值的方式更改数据。
    */
    new Vue({
        el:'#app',
        data:()=>{
            return {
                arr:[
                    {city:'巴黎',checked:false},
                    {city:'悉尼',checked:true},
                    {city:'纽约',checked:false},
                    {city:'伦敦',checked:false},
                    {city:'柏林',checked:false}
                ]
            }
        },
        methods:{
            checkall(){
                this.arr.forEach(item=>{
                    item.checked = true;
                })
            },
            inverse(){
                this.arr.forEach(item=>{
                    item.checked = !item.checked;
                })
            },
            uncheckall(){
                this.arr.forEach(item=>{                  
                    item.checked = false;
                })
            }
        }
        
    });
    </script>
</body>
</html>

 

posted @ 2019-01-30 21:31  紫诺花开  阅读(2582)  评论(0)    收藏  举报