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


Posted in Javascript onSeptember 30, 2019

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

描述:当下拉选择不同的属性选项,需展示对应的内容界面;

select下拉菜单如下:

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

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

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

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

vue实现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>

代码演示截图:

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

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

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

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

----------------------------------【功能拓展】---------------------------------------
当面临下拉有百上千个选项的时候,为了提高代码的可读性以及提交代码的运行效率。可以对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下拉显示隐藏功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 Javascript
createObjectURL方法实现本地图片预览
Sep 30 #Javascript
微信小程序实现分享商品海报功能
Sep 30 #Javascript
Bootstrap实现模态框效果
Sep 30 #Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 #Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 #Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 #Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 #Javascript
You might like
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
PHP fclose函数用法总结
2019/02/15 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
JavaScript window.location对象
2014/11/14 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
django使用channels2.x实现实时通讯
2018/11/28 Javascript
js实现一个简易计算器
2020/03/30 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
Python 递归函数详解及实例
2016/12/27 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
python实现画循环圆
2019/11/23 Python
python序列类型种类详解
2020/02/26 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
医学生自我鉴定范文
2013/11/08 职场文书
爱护公物演讲稿
2014/09/09 职场文书
2014年科技工作总结
2014/11/26 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
电影开国大典观后感
2015/06/04 职场文书
七一晚会主持词
2015/06/29 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫