Vue中实现单选框的多种方法_弄个单选框超简单_ 在Vue实例的选项中设置属性的初始值即可
Vue中实现单选框的多种方法
在Vue里，弄个单选框超简单，有好几种法子： 使用v-model指令绑定数据 这个方法超级方便，就是让单选框的数据和你的组件数据紧密联系。这样，你选啥，数据就跟着变。 #创建Vue实例 ```javascript new Vue({ el: '#app', data: { selectedOption: '' } }) ``` #在模板中使用v-model指令 ```html当前选中的是：{{ selectedOption }}
``` 使用v-bind和v-on指令 这个方法虽然需要自己动手控制状态，但灵活性高，适合复杂场景。 #创建Vue实例 ```javascript new Vue({ el: '#app', data: { selectedOption: 'option1' } }) ``` #在模板中使用v-bind和v-on指令 ```html当前选中的是：{{ selectedOption }}
``` 使用自定义组件 有时候，你想把单选框封装起来，让代码更简洁好复用。这就需要创建自定义组件。 #创建自定义组件 ```javascript Vue.component('custom-radio', { props: ['value', 'label'], template: ` ` }) ``` #在父组件中使用自定义组件 ```html