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’，如果是，则弹出提示框，否则提示未选中。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/296232.html