这里主要介绍的是使用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
分别表示获取值和设置值调用的方法。