vue实现select下拉显示隐藏功能
时间:2019-09-30
本文章向大家介绍vue实现select下拉显示隐藏功能,主要包括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>
代码演示截图:
当下拉选中【表结构变更】:
当下拉选中【接口变更】:
----------------------------------【功能拓展】---------------------------------------
当面临下拉有百上千个选项的时候,为了提高代码的可读性以及提交代码的运行效率。可以对select下拉自定义一个数组存储;
<el-form-item label="类型:"> <el-select class="col-sm-3" v-model="change.types"> <el-option v-for="option in typeOption" :key="option.value" :label="option.label" :value="option.value"> </el-option> </el-select> <el-select class="col-sm-6" v-model="change.typeChanges" @change="chooseChild"> <el-option v-for="option in childtypeOption" :key="option.value" :label="option.label" :value="option.value"> </el-option> </el-select> </el-form-item> <script> export default { name: "change", data() { change{ //定义自变量 types;'', typeChanges:'', }, //存放拉下选项,一个选项赋予一个value; typeOption: [{label: '申请类', value: '0'}], childtypeOption: [{label: '表结构变更', value: '0'}, {label: '接口变更', value: '1'}, {label: '软件升级',value: '2'},{label: '其他',value: '2'},] } </script>
运行结果仍然是一致的,也就不做截图参考了!有啥不明白的地方直接直接下方留言私戳我哟。
-------------------------------------------------------今日小结-------------------------------------------------------------
一: v-if条件判断
演示:在元素 和 template 中使用 v-if 指令:
<div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>v-if教程</h1> <p>学的不仅是技术,更是梦想!</p> <p>哈哈哈,打字辛苦啊!!!</p> </template> </div> <script> new Vue({ el: '#app', data: { seen: true, ok: true } }) </script>
二: v-for 循环
v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
演示:使用v-for 绑定数据到数组来渲染一个列表:代码如下
<div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>
总结
以上所述是小编给大家介绍的vue实现select下拉显示隐藏功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
- python 生成内嵌式字典(dict)-案例从python提取内嵌json写入mongodb
- Golang语言打印九九乘法表
- AVFoundation 框架初探究(四)
- Data Guard跳归档恢复的实践(r9笔记第92天)
- AVFoundation 框架初探究(三)
- AVFoundation 框架初探究(二)
- 关于视图和存储过程的权限问题探究 (r9笔记第87天)
- Java基础-day08-超市购物系统总结
- AVFoundation 框架初探究(一)
- 【Go 语言社区】 HTML5 前端--数据保存实例
- crontab设置导致的服务器进程异常问题 (r10笔记第4天)
- 一条SQL语句的执行计划变化探究(r10笔记第3天)
- tensorflow(一)windows 10 python3.6安装tensorflow1.4与基本概念解读
- 基于AgileEAS.NET SOA 中间件领域模型数据器快速打造自己的代码生成器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用PHP反射机制来构造"CREATE TABLE"的sql语句
- PHP PDOStatement::fetch讲解
- 解决Pytorch自定义层出现多Variable共享内存错误问题
- PHP观察者模式定义与用法实例分析
- ThinkPHP5.1表单令牌Token失效问题的解决
- PHP设计模式之工厂模式(Factory Pattern)的讲解
- keras K.function获取某层的输出操作
- 浅谈sklearn中predict与predict_proba区别
- 解决Keras中循环使用K.ctc_decode内存不释放的问题
- PDO::getAvailableDrivers讲解
- PDO::_construct讲解
- Yii2.0实现的批量更新及批量插入功能示例
- PDO::inTransaction讲解
- 小程序前后端交互使用JWT
- python文件操作seek()偏移量,读取指正到指定位置操作