vue基础知识之checkbox使用 v-model区别
首先简单说一下v-bind与v-model的区别：v-bind是单向的，数据驱动视图；v-model是双向绑定的 数据与视图相互影响。
下面介绍checkbox中v-model的使用，大体有两种情况，
一、v-model对应的data属性是数组时，返回的是checkbox的value值
二、v-model对应的data属性是Boolean时，返回的是checkbox的checked的boolean值
下面是代码举例，直接运行即可，当然代码后半段额外加上了app开发框架vant中的checkbox的情况，那个可以自己研究了。
1 <!DOCTYPE html>
2 <html >
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1.0,
7 minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
8 <meta http-equiv="X-UA-Compatible" content="ie=edge">
9 <title>Document</title>
10
11 <!-- 引入样式 -->
12 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css">
13
14 <!-- 引入组件 -->
15 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
16 <script src="https://cdn.jsdelivr.net/npm/vant@2.0/lib/vant.min.js"></script>
17 </head>
18
19 <body>
20 <div >
21
22 <h4 >radio--v-model的使用，只有一种请空，都返回value值，本次不举例</h4>
23 <h1>checkbox--v-model的使用，两种情况</h1>
24 <h3>1,v-model对应的是数组时，返回的是checkbox的value值</h3>
25 <p >checkbox是通过value值区分的，如果value值相同，选中其中一个，另一个也被选中</p>
26 <input type="checkbox" v-model="testarr" value="测试多选1-value">测试多选1
27 <input type="checkbox" v-model="testarr" value="测试多选2-value">测试多选2
28 <input type="checkbox" v-model="testarr" value="测试多选3-value">测试多选3
29 <p>v-model的值是：{{testarr}}</p>
30 <h3>1,v-model对应的是Boolean时，返回的是checkbox的checked的boolean值</h3>
31 <p >checkbox是通过value值区分的，如果value值相同，选中其中一个，另一个也被选中</p>
32 <input type="checkbox" v-model="testarr1" value="测试多选4-value">测试多选4
33 <input type="checkbox" v-model="testarr1" value="测试多选5-value">测试多选5
34 <input type="checkbox" v-model="testarr1" value="测试多选6-value">测试多选6
35 <p>v-model的值是：{{testarr1}}</p>
36
37 <hr>
38 <h1>PS：测试vant的 checkbox</h1>
39 <h4>---单个checkbox</h4>
40 <van-checkbox shape="square" v-model="checked">复选框boolean类型model</van-checkbox>
41 <van-cell-group>
42 <van-field label="你选择的是:" v-model="checked" />
43 </van-cell-group>
44 <h4>---多个checkbox</h4>
45 <van-checkbox-group v-model="result">
46 <van-checkbox v-for="(item, index) in list" :key="item" :name="item">
47 复选框 {{ item }}
48 </van-checkbox>
49 </van-checkbox-group>
50 <van-cell-group>
51 <van-field label="你选择的是:" v-model="result" />
52 </van-cell-group>
53 </div>
54
55 <script>
56 //var vant = window.vant;
57
58 var app = new Vue({
59 el: "#app",
60 data() {
61 return {
62 testarr: [],
63 testarr1: true,
64 /*--vant data test--*/
65 checked: true,
66 list: ['a', 'b', 'c'],
67 result: ['a', 'b']
68 }
69 }
70 })
71
72 // 注册组件
73 Vue.use(vant);
74
75 </script>
76 </body>
77
78 </html>