首先簡單說一下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>