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 lang="en"> 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 id="app"> 21 22 <h4 style="color:red;">radio--v-model的使用，只有一种请空，都返回value值，本次不举例</h4> 23 <h1>checkbox--v-model的使用，两种情况</h1> 24 <h3>1,v-model对应的是数组时，返回的是checkbox的value值</h3> 25 <p style="color:red;font-size:14px">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 style="color:red;font-size:14px">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>
