vue实现选择下拉显示和隐藏功能

今天就来说说吧，我就是在项目中遇到这样的功能需求；

说明：在下拉选择不同的属性选项时，需要显示相应的内容界面；

选择下拉菜单，如下所示：

当您下拉选择“更改表结构”时，将显示以下界面：

当您下拉并选择界面更改时，将显示以下界面：

代码实现vue.js:

//定义选择下拉菜单El-form-项目标签=' type' El-select v-model=' form。typechanges' El-optionlabel='表结构更改'值=' tableChange '/El-option el-option label='接口更改'值='接口更改'/El-option El-option label='软件升级'值=' softChange '/El-option El-option label='其他'值='其他更改'/El-option/El-select/El-form-item//通过组合vue-for loop和vue-id//判断条件1:当下拉选择了表结构更改时，即如下type changes==' table change ' ' div prop=' items ' El-form-item label=' table name:' El-input v-model=' form。tablename' cl显示为Ass=' col-sm-8 '/El-input/El-form-item El-form-item label=' create table SQL:' El-input type=' text area ' v-model=' form。createql ' class=' col-sm-8 '/El-input/El-form-item/div/div//判断条件2:当下拉选择了接口变更时，即显示如下界面：div v-for=' items in items ' v-if=' form . type changes=' interface change ' ' div prop=' items ' El-form-item label='界面名称：' El-input v-model=' form . interface .埃纳姆' class=' col-sm-8 '/El-input/El-form-form-item

选择下拉框后，更改表格结构：

当从下拉列表中选择[界面更改]时：

-功能扩展。您可以为选择下拉菜单自定义阵列存储；

El-form-item标签=' type : ' El-select class=' col-sm-3 ' v-model=' change。在type option' 3360 key='选项中键入' El-option v-for='选项。value ' : labe l=' option . label ' : value=' option . value '/El-option/El-select El-select class=' col-sm-6 ' v-model=' change . typechanges ' @ change=' choice child ' El-option v-for=' option in childtypeOption ' : key=' option . va Lue ' : label=' option。标签“: value=”选项。value '/El-option/El-select/El-form-item script导出默认值{name :' change '，data(){ change {//定义了自变量类型；typeChanges: ' '，}，//存储下拉选项，并且每个选项都被赋予一个值；typeoption :[{ label : ' application class '，value:' 0'}]，childtypeoption :[{ label : ' table structure change '，value3360' value: '0'}，{label:' interface change '，value: ' 1 ' }，{ label: ' software upgrade '，value 33: ' 2 ' }，{ label: ' other '如果什么都不懂，直接在下面留言，私底下戳我。

-今天的总结-今天的总结

1.如果有条件判决

演示：在元素和模板中使用v-if指令：

div id=' app ' p v-if=' seed '现在你看到我了/p模板v-if='ok' h1v-if教程/h1 p不仅学会了技术，还学会了梦想！/p p哈哈哈，打字真难！/p/template/div script new vue({ El : ' # app '，data: { seen 3360 true，ok : true}})/script 2: v-for循环

v-for指令需要site in sites形式的特殊语法，site是源数据数组，site是数组元素迭代的别名。

演示：使用v-for将数据绑定到数组以呈现列表：代码如下

div id='app' ol li v-for='网站中的网站' { site . name } }/Li/ol/div script new Vue({ El : ' # app '，data : { sites :[{ name : ' Runoob ' }，{name:' Google'}，{ name 3: '淘宝' } })/脚本摘要

以上就是边肖介绍给大家的vue实现了选择下拉显示隐藏功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！