input中的值绑定

使用input值绑定前 

每一个value都要手动去写，并且是固定的值

  <select name="abc" id="" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="葡萄">葡萄</option>
    <option value="榴莲">榴莲</option>
    <option value="哈密瓜">哈密瓜</option>
  </select>

使用input值绑定后

使用v-for遍历，大大减少代码量，且灵活可以改变

<div id="app">
<!--  1.单选框-->
<!--  <label for="">-->
<!--    <input type="checkbox" id="agree" v-model="isAgree">同意协议-->
<!--  </label>-->
<!--  <h2>您选择的是：{{isAgree}}</h2>-->
<!--&lt;!&ndash;  <button :disabled="isAgree==false">下一步</button>&ndash;&gt;-->
<!--  <button :disabled="!isAgree">下一步</button>-->
<!--2.多选框-->
    <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">网球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <h2>您的爱好是：{{hobbies}}</h2>


  <label v-for="item in originHobbies">
    <input type="checkbox" :value="item" v-model="hobbies">{{item}}
  </label>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"这是一个vue模板",
          isAgree:false,
          hobbies:[],
          originHobbies:["篮球","羽毛球","网球","乒乓球","棒球"]
        }
  })
</script>

 增加动态绑定id

  <label v-for="item in originHobbies" for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
  </label>