vue 组件实现收货地址 根据下拉框选择不同状态显示不同信息
时间: 2023-06-08 21:04:57 浏览: 103
对于这个问题,我可以提供一些帮助和建议。你可以在 Vue 组件中使用条件渲染或者计算属性来实现根据下拉框选择不同状态显示不同信息的功能。具体的实现方式会根据你的具体业务需求和代码实现有所不同,但是你可以参考一下以下的示例代码:
```html
<template>
<div>
<select v-model="selectedStatus">
<option value="0">收货地址</option>
<option value="1">工作地址</option>
</select>
<div v-if="selectedStatus === '0'">
<input type="text" v-model="address" placeholder="请输入收货地址">
<input type="text" v-model="contact" placeholder="请输入联系人姓名">
</div>
<div v-else-if="selectedStatus === '1'">
<input type="text" v-model="address" placeholder="请输入工作地址">
<input type="text" v-model="contact" placeholder="请输入工作联系人姓名">
<input type="text" v-model="company" placeholder="请输入工作单位名称">
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedStatus: '0',
address: '',
contact: '',
company: ''
}
}
}
</script>
```
这个示例代码中,在组件中通过一个下拉框选择不同的状态,然后根据不同的状态来显示不同的输入框。你可以根据自己的具体业务需求调整代码实现,但是这个示例代码可以作为一个参考。希望能对你有所帮助!