给用户提供一组选项,用户可以选择其中的一个选项,这就是 Radio,也就是单选按钮的功能。下面我们在这个组件里试一下单选按钮。先在组件里添加一个数据,比如 subscription,表示订阅,给它提供一个默认的值,比如 annual,指的是按年订阅的意思。
然后在组件的模板里添加一组单选按钮,单选按钮就是 radio 类型的 input 元素。元素上用 value 设置一下这个单选按钮的值,设置成 annual,然后用 v-model 绑定一个数据,数据的名字叫 subscription。 这样如果用户选择的是这个单选按钮,组件里的 subscription 的值就会是 annual。
可以再给这个单选按钮添加一组 label 元素,可以用它包装一下这个 radio 元素。 label 的 for 属性设置成 subscription-annual ,标签的文字是 一年。然后在这个 radio 元素上面,需要再添加一个 id 属性,它的值跟 label 的 for 属性的值一致,这里应该就是 subscription-annual 。
复制一份这个单选按钮元素,再修改一下,for 属性的值设置成 subscription-quarterly ,表示按季度订阅, radio 元素的 id 也设置成 subscription-quarterly。
元素的值设置成 quarterly,元素绑定的数据是 subscription,现在这两个单选按钮元素绑定的数据都是 subscription,所以它们属于同一个群组。 标签文字是 季度。
下面可以在组件里绑定输出 subscription 的值,这样它的值有变化的时候,我们可以马上看到。
回到浏览器预览一下,你会发现当前被选中是标签是一年的这个 radio 元素,因为这个 radio 元素的值是 annual ,组件里的 subscription 数据默认的值就是 annual。
点击选择 季度,你会发现,现在组件里的 subscription 的值就变成了 quarterly 。