vue 用户类型可选企业或者个人,选中企业则显示输入营业执照,选中个人则显示输入身份证号
时间: 2023-08-22 19:04:37 浏览: 38
要根据用户选择的用户类型来显示不同的输入框,您可以使用 Vue 的条件渲染来实现。以下是一个示例:
```html
<template>
<div>
<label for="userType">用户类型:</label>
<select id="userType" v-model="selectedUserType">
<option value="enterprise">企业</option>
<option value="personal">个人</option>
</select>
<div v-if="selectedUserType === 'enterprise'">
<label for="businessLicense">营业执照:</label>
<input type="text" id="businessLicense" v-model="businessLicense" />
</div>
<div v-if="selectedUserType === 'personal'">
<label for="idCard">身份证号:</label>
<input type="text" id="idCard" v-model="idCard" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedUserType: '',
businessLicense: '',
idCard: '',
};
},
};
</script>
```
在上述代码中,我们使用 `v-model` 来绑定 `selectedUserType` 变量,该变量用于存储用户选择的用户类型。根据 `selectedUserType` 的值,使用 `v-if` 来判断显示不同的输入框。
如果用户选择了 "企业",则显示营业执照输入框;如果用户选择了 "个人",则显示身份证号输入框。
您可以根据实际需求修改 `<select>` 中的选项值和显示的文本,以及相应的输入框的标签和绑定的变量。
希望以上信息能对您有所帮助!如果您还有其他问题,请随时提问。