html部分
-
- <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">选项1label>
- <br />
- <input type="checkbox" id="val2" value="选项2" v-model="checkedname" />
- <label for="val2">选项2label>
- <br />
- <input type="checkbox" id="val3" value="选项3" v-model="checkedname" />
- <label for="val3">选项3label>
- <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 = []
- }
- }
- }
- })
有兴趣的赶紧去试试吧,希望能帮助到您!