Vue——radio、checkbox、select 標簽的雙向綁定

• radio

  單選框的雙向綁定，每個選項都需要設置 value 值和 v-model ，雙向綁定就是綁定的這兩個值

  <label for="male">
      <input type="radio" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
      <input type="radio" id="female" value="女" v-model="sex">女
  </label>
  // v-model 必須綁定同一個屬性，可以不用設置 name 屬性（因為v-model已經確定了單選框的分組）
  
  let vue = new Vue({
      el: '#app',
      data: {
          sex:'男'		//默認值可以通過 v-model 設置初始值實現
      },
  }
  

  住：input 一般都需要綁定 label ，因為綁定了點擊文字也能選中，優化了用戶體驗

• checkbox

  • 單個框（一幫用於用戶協議）

    用 v-model 綁定 boolear 值來切換選中狀態

    <label for="agree">
        <input type="checkbox" id="agree" v-model="isAgree">同意
    </label>
    <h3>{{isAgree}}</h3>
    
    let vue = new Vue({
        el: '#app',
        data: {
            sex:'男',     //設置初始值實現默認選中
            isAgree: false
        }
    })
    

  • 多個框

    每個選項 v-model 綁定相同的數組，數組內存儲的是選中的 value

    <label for="apple">
        <input type="checkbox" id="apple" value="apple" v-model="fruits">蘋果
    </label>
    <label for="banana">
        <input type="checkbox" id="banana" value="banana" v-model="fruits">香蕉
    </label>
    <label for="orange">
        <input type="checkbox" id="orange" value="orange" v-model="fruits">蘋果
    </label>
    <h3>{{fruits}}</h3>
    
    let vue = new Vue({
        el: '#app',
        data: {
            sex:'男',     //設置初始值實現默認選中
            isAgree: false,
            fruits: ['apple']
        },
        methods: {
    
        }
    })
    

• select

  v-model 寫在 select 標簽上

  • 單選

    v-mode 綁定字符串

    <select  v-model="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="廣州">廣州</option>
    </select>
    <h3>{{city}}</h3>
    let vue = new Vue({
        el: '#app',
        data: {
            sex:'男',     //設置初始值實現默認選中
            isAgree: false,
            fruits: ['apple'],
            city:'北京',
        },
        methods: {
    
        }
    })
    

  • 多選

    v-model 綁定數組，select 設置屬性 multiple，按住 ctrl 選中多個

    <select v-model="citys" multiple>
        <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="廣州">廣州</option>
    </select>
    <h3>{{citys}}</h3>
    
    let vue = new Vue({
        el: '#app',
        data: {
            sex:'男',     //設置初始值實現默認選中
            isAgree: false,
            fruits: ['apple'],
            city:'北京',
            citys: []
        },
        methods: {
    
        }
    })