v-model 结合 checkbox 类型

复选框分为两种情况：单个勾选框和多个勾选框

单个勾选框：

v-model 即为布尔值。

此时 input 的 value 并不影响 v-model 的值。

<div id="app">

  <!-- 1.checkbox 单选框-->
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <h2>您选择的是:{{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>

  
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            message:'你好呀',
            isAgree:false,//单选框
            hobbies:[] // 多选框
        }
    })
</script>

多个复选框：

当是多个复选框时，因为可以选中多个，所以对应的 data 中属性是一个数组。

当选中某一个时，就会将 input 的 value 添加到数组中。

<div id="app">
  <!--2.checkbox 多选框-->
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="唱歌" v-model="hobbies">唱歌
  <input type="checkbox" value="跳舞" v-model="hobbies">跳舞
  <h2>您的爱好是:{{hobbies}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            message:'你好呀',
            isAgree:false,//单选框
            hobbies:[] // 多选框
        }
    })
</script>