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

大纲：

       1、怎么根据下拉框中选中的值展示不同的输入框呢？

        我们可以使用change事件来进行处理。当我们选中收费类型的其中一个就触发change事件，然后根据选中的value值，对数据进行展示与隐藏 即可。

        收费类型分为三种，即按天 按分钟 按次收费，而我们需要根据不同的收费类型展示类型中的数据。

        1 按天收费：freeTime(免收分钟)、dayMaxPrice(每日最高金额)
     
        2 按分钟收费：freeTime(免收分钟)、startPrice(起步金额)、startTime(起步分钟)、dayUnitTime(超/分钟)、dayUnitPrice(超/分钟 收费金额)
  
        3 按次收费：unitPrice(每次收费金额)

        按天按分钟收费 共用字段：freeTime(免收分钟)

---

  代码展示：

实现步骤：

 1、我们先调收费类型接口 获取收费类型的数据，然后给收费类型中加一个change事件；

打印看看e里面的内容是什么。

由图可知，e里面有value值(实际上就是选中类型的Id)、一些数据，而我们真正需要的数据就是dicData数组里边的数据【describe(规则详情) 、name(收费类型)】

---

  2、将按次、按天、按分钟收费需要展示的字段都先定义在options中，给展示的字段一个默认的初始值（display 是否显示） display: false；我们就让他默认隐藏。

---

 3、写一个专门判断选中类型的方法，通过 e.value 来判断选中的那个收费类型从而进行判断，遍历option.column，修改对应的属性值的状态，是否显示或隐藏。

---

 4、在change事件中调用判断选中类型的方法，change: (e) => {  this.onChangeType(e) }

 5、测试是否有效果

---

！！！注意：一定要给设置字段初始值(display: 'false'),不然的话判断了显示与隐藏也没效果 

---

 效果图：

        按次收费

         按分钟收费

        按天收费 

---

 视频效果展示：

收费规则