html部分
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()" />
<label for="checkbx">
{{checked}}
</label>
<br />
<input type="checkbox" id="val1" value="选项1" v-model="checkedname" />
<label for="val1">选项1</label>
<br />
<input type="checkbox" id="val2" value="选项2" v-model="checkedname" />
<label for="val2">选项2</label>
<br />
<input type="checkbox" id="val3" value="选项3" v-model="checkedname" />
<label for="val3">选项3</label>
<br />
<span>选择的值为:{{checkedname}}</span>
</div>
js部分
var vm = new Vue({
el: '#app', //挂载位置
data: {
checked: false,
checkedname: [],
checkedArr: ["选项1", "选项2", "选项3"]
},
methods: {
changeAllChecked: function() {
if (this.checked) {
this.checkedname = this.checkedArr
} else {
this.checkedname = []
}
}
}
})
有兴趣的赶紧去试试吧,希望能帮助到您!