vue element radio 点击时间控制其他元素显示隐藏
时间: 2023-06-14 19:05:50 浏览: 127
vue组件实现弹出框点击显示隐藏效果
可以通过绑定点击事件来实现这个功能,具体步骤如下:
1. 在需要控制显示/隐藏的元素上添加 v-show 指令,初始值为 false,表示不显示。
```html
<div v-show="showElement">这是需要控制的元素</div>
```
2. 在需要触发显示/隐藏的 radio 上绑定点击事件,通过修改 showElement 的值来控制元素的显示/隐藏。
```html
<el-radio v-model="radio" label="1" @click="showElement = true">选项1</el-radio>
<el-radio v-model="radio" label="2" @click="showElement = false">选项2</el-radio>
```
3. 在 data 中定义 showElement 和 radio 变量,radio 变量用于绑定 radio 的选中状态。
```js
data() {
return {
showElement: false,
radio: ''
}
}
```
这样点击 radio 选项就可以控制需要显示/隐藏的元素了。
阅读全文