vue 单选radio vue审核通过默认填写同意,审核不通过,需要填写不通过的原因
时间: 2024-04-14 12:25:37 浏览: 52
vue 表单之通过v-model绑定单选按钮radio
5星 · 资源好评率100%
在Vue中,你可以使用单选按钮(radio)来实现审核通过和审核不通过的选择。首先,你可以在Vue的数据中定义一个名为`status`的变量,用来表示审核状态。当审核通过时,将`status`设为"通过",当审核不通过时,将`status`设为"不通过"。
接下来,在模板中使用`v-model`指令将`status`与单选按钮绑定起来,确保只能选择其中一个选项。例如:
```html
<template>
<div>
<label>
<input type="radio" value="通过" v-model="status"> 同意
</label>
<label>
<input type="radio" value="不通过" v-model="status"> 不同意
</label>
</div>
</template>
```
此时,当选择"同意"时,`status`的值将为"通过";当选择"不同意"时,`status`的值将为"不通过"。
如果需要填写不通过的原因,你可以根据`status`的值来决定是否显示一个输入框。例如:
```html
<template>
<div>
<label>
<input type="radio" value="通过" v-model="status"> 同意
</label>
<label>
<input type="radio" value="不通过" v-model="status"> 不同意
</label>
<div v-if="status === '不通过'">
<label>不通过原因:</label>
<input type="text" v-model="reason">
</div>
</div>
</template>
```
在这个例子中,当选择"不同意"时,会显示一个输入框供填写不通过的原因。你可以使用`v-model`指令将输入框的值绑定到`reason`变量上,以便进一步处理或提交数据。
这样,你就可以通过单选按钮来实现审核通过默认填写同意,并且审核不通过时需要填写不通过的原因。
阅读全文