·复选框绑定分为单个选项与多个选项两种情况,书写方式不同。

    复选框绑定 表单数据绑定 - 图1

    <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> </head> <body> <div id=“app”> <p>单个复选框的值: {{ value4 }}</p> <input type=“checkbox” value=“选项内容” id=“one” v-model=“value4”> <label for=“one”>选项内容</label> <p>多个复选框的值:{{ value5 }}</p> <input type=“checkbox” id=“cb1” value=“选项1” v-model=“value5” > <label for=“cb1”>选项1</label> <input type=“checkbox” id=“cb2” value=“选项2” v-model=“value5” > <label for=“cb2”>选项2</label> <input type=“checkbox” id=“cb3” value=“选项3” v-model=“value5” > <label for=“cb3”>选项3</label> </div> <script src=“lib/vue.js”></script> <script> var vm = new Vue({ el: ‘#app’, data: { value4: ‘’, value5: [] //数组 } }); </script> </body> </html>