要通过vue的v-model获取选中复选框的值，可以用遍历对象的方式获取，代码如下：
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title></title>
6 <script src="../js/vue2.js"></script>
7 <script src="../js/vue-resource.js"></script>
8 </head>
9 <body>
10 <div id="app">
11 <input type="checkbox" v-model="person.jack" value="jack" id="Jack" /><label for="Jack">jack</label>
12 <input type="checkbox" v-model="person.bob" value="bob" id="Bob" /><label for="Bob">bob</label>
13 <input type="checkbox" v-model="person.alice" value="alice" id="Alice" /><label for="Alice">alice</label>
14 <p>已选：{{person}}</p>
15 <div><button @click="show">显示</button></div>
16 <p>结果：{{result.toString()}}</p>
17 </div>
18
19 <script>
20
21
22 var app = new Vue({
23 el: ‘#app‘,
24 data: {
25 person: { jack: true, bob: true, alice: false },
26 result:[]//获取选中后的checkbox的数组值
27 },
28 methods: {
29 show: function () {
30 this.result = [];
31 for (var i in this.person) {
32 if (this.person[i] == true) {
33 this.result.push(i);
34 }
35 }
36 },
37 },
38 });
39 </script>
40 </body>
41 </html>
时间： 2024-10-18 14:50:53