一、Vue单选框
Vue的单选框和原始单选框有很多相似点，但是Vue的单选框有自己的特色功能。
Vue的单选框可以非常简单的创建，只需在`<input>`元素的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单选按钮
与单选框相同，一个组中的单选按钮只允许用户选择一个选项，只需把`<input>`元素的`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'，如果是，则弹出提示框，否则提示未选中。
