在Vue中如何根据下拉框选中的值 展示不同的输入框

**Vue 中根据下拉框选中的值展示不同的输入框**

在实际的开发过程中，我们经常会遇到这样的需求：根据用户选择的某个值，动态地改变页面的显示内容。例如，在一个订单管理系统中，如果用户选择了不同的支付方式，那么就需要展示相应的支付信息。在这种情况下，我们可以使用 Vue 的条件渲染功能来实现这一点。

**条件渲染**

Vue 提供了几个条件渲染的方法，包括 `v-if`、`v-else` 和 `v-show`。其中，最常用的就是 `v-if` 和 `v-else`。我们可以使用它们来根据某个值的变化而改变页面的显示内容。

**示例代码**

假设我们有一个下拉框，选项包括 "支付宝"、"微信" 和 "银行转账"。当用户选择了不同的支付方式时，我们需要展示相应的支付信息。

html<template>
 <div>
 <!-- 下拉框 -->
 <select v-model="paymentMethod">
 <option value="alipay">支付宝</option>
 <option value="wechat">微信</option>
 <option value="bankTransfer">银行转账</option>
 </select>

 <!-- 支付信息 -->
 <div v-if="paymentMethod === 'alipay'">
 <p>支付方式：支付宝</p>
 <p>收款账号：1234567890</p>
 </div>
 <div v-else-if="paymentMethod === 'wechat'">
 <p>支付方式：微信</p>
 <p>收款账号：WECHAT_1234567890</p>
 </div>
 <div v-else>
 <p>支付方式：银行转账</p>
 <p>收款账号：BANK_TRANSFER_1234567890</p>
 </div>
 </div>
</template>

<script>
export default {
 data() {
 return {
 paymentMethod: ''
 }
 }
}
</script>