使用vue制作全选和不全选

版权声明：转载原创文章请注明：文章转载自：前端精髓 https://blog.csdn.net/wu_xianqiang/article/details/79221448

这里主要介绍的是使用vue双向数据的一个指令v-module

<div id="app">
    <input type="checkbox" v-model="all">全选
    <input type="checkbox" value="HTML" v-model="msg">HTML
    <input type="checkbox" value="CSS" v-model="msg">CSS
    <input type="checkbox" value="JS" v-model="msg">JS
    <div v-show="msg.length">
        已选择：{{msg.length}} 个
    </div>
</div>

代码逻辑如下

let vm = new Vue({
        el: "#app",
        data: {
            msg: []
        },
        computed: {
            all: {
                get () {
                    return this.msg.length === 3
                },
                set (val) {
                    if (val) {
                        this.msg = ["HTML", "CSS", "JS"]
                    } else {
                        this.msg = []
                    }
                }
            }
        }
    })

使用vue中计算属性实现的，因为在vue中挂载的数据如果发生改变，计算属性就会重新求值，计算数据中有get和set 分别表示获取值和设置值调用的方法。