Vue單選詳解

一、Vue單選框

Vue的單選框和原始單選框有很多相似點，但是Vue的單選框有自己的特色功能。

Vue的單選框可以非常簡單的創建，只需在“元素的type屬性中設定值為「radio」即可：

  
  <div id="app">
    <input type="radio" name="radio" value="A">A
    <input type="radio" name="radio" value="B">B
    <input type="radio" name="radio" value="C">C
  </div>

  new Vue({
    el: '#app'
  });
  

在上述代碼中，”name”屬性用於把所有的單選項綁定到一起，只有選中的單選框會提交表單數據。

二、Vue單選全選功能

在某些情況下，我們需要實現「全選」和「取消全選」功能，可以通過Vue的數據雙向綁定實現：

  
  <div id="app">
    <input type="checkbox" v-model="selectAll">全選
    <input type="checkbox" v-model="selected">A
    <input type="checkbox" v-model="selected">B
    <input type="checkbox" v-model="selected">C
  </div>

  new Vue({
    el: '#app',
    data: {
      selectAll: false,
      selected: []
    },
    watch: {
      selectAll: function(val) {
        this.selected = val ? ['A', 'B', 'C'] : [];
      }
    }
  });
  

在這個例子中，我們使用v-model把「全選」和每一個單選框都綁定到同一個變數中。當我們選中「全選」時，所有的單選框都會被選中，當我們取消「全選」時，所有的單選框都會被取消。

在Vue中，我們可以通過watch監聽全選框的變化，當全選框被選中時，我們把selected數組中的項設置為所有單選項的值，否則，我們把selected數組清空。

三、Vue單選按鈕

與單選框相同，一個組中的單選按鈕只允許用戶選擇一個選項，只需把“元素的`type`屬性設置為「radio」，`name`屬性設置成相同的值即可：

  
  <div id="app">
    <input type="radio" name="radio" value="A">A
    <input type="radio" name="radio" value="B">B
    <input type="radio" name="radio" value="C">C
  </div>

  new Vue({
    el: '#app'
  });
  

四、Vue單選框屬性

Vue提供了一些單選框特用的屬性：

• v-model：綁定值，在選項改變時更新數據。
• value：選項的值。
• disabled：禁用此選項。
• id：單選框的ID。
• name：單選框的名稱，多個單選框需要使用同一個名稱。
• required：必選項，該單選框必須被選中才能提交表單。
• checked：是否選中此選項。

五、Vue單選框radio

當綁定的值與選項的value屬性相等時，選項會被選中。如果綁定的值是一個boolean類型的值，則選項將被選中或取消選中。同樣，如果選項被選中或取消選中，綁定的值也會隨之改變。

  
  <div id="app">
    <input type="radio" v-model="selected" value="A">A
    <input type="radio" v-model="selected" value="B">B
    <input type="radio" v-model="selected" value="C">C
  </div>

  new Vue({
    el: '#app',
    data: {
      selected: ''
    }
  });
  

在上述代碼中，我們綁定了一個選項到一個變數中，當我們選中一個選項時，該變數會自動更新為選項的value屬性。

六、Vue單選框回填

有時我們需要把表單中的數據回填到表單中，Vue提供了一個簡單的方法來處理單選框的回填，使用v-bind綁定checked屬性即可：

  
  <div id="app">
    <input type="radio" v-model="selected" value="A" :checked="selected == 'A'">A
    <input type="radio" v-model="selected" value="B" :checked="selected == 'B'">B
    <input type="radio" v-model="selected" value="C" :checked="selected == 'C'">C
  </div>

  new Vue({
    el: '#app',
    data: {
      selected: 'A'
    }
  });
  

在這個例子中，我們使用了綁定checked屬性，當selected值等於單選框的value屬性時，checked屬性才會被設置為true。

七、Vue單選數據綁定

Vue中的單選框可以和其他表單元素一樣，使用v-model指令來實現數據的雙向綁定：

  
  <div id="app">
    <input type="radio" v-model="selected" value="A">A
    <input type="radio" v-model="selected" value="B">B
    <input type="radio" v-model="selected" value="C">C
    <br>
    {{ selected }}
  </div>

  new Vue({
    el: '#app',
    data: {
      selected: ''
    }
  });
  

在Vue中，v-model指令在表單元素里創建了一個綁定，使表單元素和Vue實例中的值產生雙向綁定關係。

八、Vue單選全選js交互

我們可以使用JavaScript在Vue中實現全選和取消全選功能，使用v-on指令監聽選中狀態的變化：

  
  <div id="app">
    <input type="checkbox" v-model="selectAll" v-on:change="selectAllFn">全選
    <input type="checkbox" v-model="selected" v-on:change="selectedFn">A
    <input type="checkbox" v-model="selected" v-on:change="selectedFn">B
    <input type="checkbox" v-model="selected" v-on:change="selectedFn">C
  </div>

  new Vue({
    el: '#app',
    data: {
      selectAll: false,
      selected: []
    },
    methods: {
      selectAllFn: function() {
        if (this.selectAll) {
          this.selected = ['A', 'B', 'C'];
        } else {
          this.selected = [];
        }
      },
      selectedFn: function() {
        if (this.selected.length === 3) {
          this.selectAll = true;
        } else {
          this.selectAll = false;
        }
      }
    }
  });
  

在上述代碼中，我們使用v-on指令監聽選項改變的事件。如果單選框選中，我們就把它的value加入到selected數組中，否則就把它的value從selected數組中刪除。當selected數組中的選項為3時，我們勾選全選框，否則取消全選框的選中狀態。

九、Vue單選框布爾值

Vue中有時候我們只需要一個布爾值，這個值可以表示未選中和選中兩種狀態，我們可以通過v-model指令實現單選框的值綁定：

  
  <div id="app">
    <input type="radio" v-model="selected" true-value="1" false-value="0">A
    <input type="radio" v-model="selected" true-value="1" false-value="0">B
    <input type="radio" v-model="selected" true-value="1" false-value="0">C
    <br>
    {{ selected }}
  </div>

  new Vue({
    el: '#app',
    data: {
      selected: 0
    }
  });
  

在上述代碼中，我們使用了true-value和false-value屬性將單選框的值設置為0和1。當單選框被選中時，它的值被更新為true-value或false-value中的一個值。

十、Vue單選按鈕選中狀態選取

在某些情況下，我們需要判斷一個單選按鈕是否被選中，可以使用v-bind指令綁定checked屬性：

  
  <div id="app">
    <input type="radio" v-model="selected" value="A" :checked="selected == 'A'">A
    <input type="radio" v-model="selected" value="B" :checked="selected == 'B'">B
    <input type="radio" v-model="selected" value="C" :checked="selected == 'C'">C

    <button v-on:click="checkSelected">判斷單選框是否選中</button>
  </div>

  new Vue({
    el: '#app',
    data: {
      selected: ''
    },
    methods: {
      checkSelected: function() {
        if (this.selected == 'A') {
          alert('A is selected')
        } else {
          alert('Not selected')
        }
      }
    }
  });
  

在上述代碼中，我們使用v-bind指令綁定checked屬性，使用v-on指令綁定按鈕的click事件。在checkSelected方法中，我們判斷當前選中的值是否是’A’，如果是，則彈出提示框，否則提示未選中。