Vue单项数据绑定单选题
时间: 2024-06-14 16:07:10 浏览: 7
在Vue中,可以使用v-model指令实现单项数据绑定的单选题。下面是一个示例:
```html
<template>
<div>
<h2>单选题</h2>
<ul>
<li v-for="option in options" :key="option.id">
<input type="radio" :id="option.id" :value="option.value" v-model="selectedOption">
<label :for="option.id">{{ option.label }}</label>
</li>
</ul>
<p>你选择的选项是: {{ selectedOption }}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ id: 1, label: '选项1', value: 'option1' },
{ id: 2, label: '选项2', value: 'option2' },
{ id: 3, label: '选项3', value: 'option3' }
],
selectedOption: ''
};
}
};
</script>
```
在上面的示例中,我们使用v-for指令遍历选项列表,并为每个选项生成一个单选框。通过v-model指令将选中的值绑定到selectedOption变量上。当用户选择一个选项时,selectedOption的值会自动更新。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)