vue实现select下拉显示隐藏功能

今日，怂怂就来说说，在项目中刚遇到这么一个功能需求；

描述：当下拉选择不同的属性选项，需展示对应的内容界面；

select下拉菜单如下：

当下拉选择【表结构变更】、即展示如下界面：

当下拉选择【接口变更】、即展示如下界面：

代码实现 vue.js：

//定义一个select下拉菜单
<el-form-item label="类型">
 <el-select v-model="form.typeChanges">
  <el-option label="表结构变更" value="tableChange"></el-option>
  <el-option label="接口变更" value="interfaceChange"></el-option>
  <el-option label="软件升级" value="softChange"></el-option>
  <el-option label="其他" value="otherChange"></el-option>
 </el-select>
</el-form-item>
//通过结合vue-for循环以及vue-id判断条件
//判断条件一：当下拉选中【表结构变更】，即显示以下界面
 <div v-for="item in items" v-if="form.typeChanges=='tableChange'" >
  <div prop="items">
  <el-form-item label="表名：" >
   <el-input v-model="form.tableName" class="col-sm-8"></el-input>
  </el-form-item>
   <el-form-item label="建表SQL：">
   <el-input type="textarea" v-model="form.createSql" class="col-sm-8"></el-input>
   </el-form-item>
  </div>
 </div>
//判断条件二：当下拉选中【接口变更】，即显示以下界面
 <div v-for="item in items" v-if="form.typeChanges=='interfaceChange'">
  <div prop="items">
   <el-form-item label="接口名：">
    <el-input v-model="form.interfaceName" class="col-sm-8"></el-input>
   </el-form-item>
  </div>
 </div>

代码演示截图：

当下拉选中【表结构变更】：

当下拉选中【接口变更】：

———————————-【功能拓展】—————————————