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

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

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

select下拉菜单如下：

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

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

代码实现 vue.js：

//定义一个select下拉菜单

//通过结合vue-for循环以及vue-id判断条件

//判断条件一：当下拉选中【表结构变更】，即显示以下界面

//判断条件二：当下拉选中【接口变更】，即显示以下界面

代码演示截图：

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

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

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

当面临下拉有百上千个选项的时候，为了提高代码的可读性以及提交代码的运行效率。可以对select下拉自定义一个数组存储；

:value="option.value">

<