vue3中,点击单选框显示内容,取消单选框不显示内容
时间: 2024-05-15 18:13:19 浏览: 16
你可以通过绑定单选框的 `v-model` 指令来实现该功能。当单选框被选中时,`v-model` 绑定的变量会被设置为单选框的 value 值,此时你可以在页面中显示对应的内容。当单选框被取消选中时,`v-model` 绑定的变量会被重置为 null 或者 undefined,此时你可以隐藏对应的内容。
以下是一个基本的示例:
```vue
<template>
<div>
<label>
<input type="radio" value="option1" v-model="selectedOption"> Option 1
</label>
<label>
<input type="radio" value="option2" v-model="selectedOption"> Option 2
</label>
<div v-if="selectedOption === 'option1'">
Option 1 is selected
</div>
<div v-if="selectedOption === 'option2'">
Option 2 is selected
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: null
}
}
}
</script>
```
在上面的示例中,当选中单选框时,`selectedOption` 的值会被设置为对应的 value 值(`'option1'` 或者 `'option2'`),此时对应的内容会被显示出来。当取消选中时,`selectedOption` 的值会被重置为 `null`,对应的内容会被隐藏。
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)