vue如果点击了密码分享el-radio那么出现一个输入框,如果点击其他el-radio那么让输入框隐藏
时间: 2023-11-08 14:15:24 浏览: 212
你可以使用 `v-if` 或者 `v-show` 指令来根据不同的单选框选项来决定是否渲染输入框。
以下是一个示例代码:
```html
<template>
<div>
<el-radio-group v-model="selectedOption">
<el-radio label="option1">Option 1</el-radio>
<el-radio label="option2">Option 2</el-radio>
<el-radio label="option3">Option 3</el-radio>
<el-radio label="option4">Password Share</el-radio>
</el-radio-group>
<el-input v-if="selectedOption === 'option4'" v-model="password" placeholder="Enter password" />
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
password: ''
}
}
}
</script>
```
在上面的代码中,我们使用了 `v-if` 指令来根据 `selectedOption` 的值来判断是否渲染输入框。当 `selectedOption` 的值为 `'option4'` 时,输入框会被渲染出来,否则会隐藏。
需要注意的是,当渲染输入框时,需要将输入框的值绑定到一个变量上,这样才能获取到用户输入的密码。在上面的代码中,我们将输入框的值绑定到 `password` 变量上,并且我们可以在代码中使用 `password` 来获取用户输入的密码。
阅读全文