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 相关文章推荐
Javascript valueOf 使用方法
Dec 28 Javascript
javascript 函数速查表
Feb 07 Javascript
理解Javascript_12_执行模型浅析
Oct 18 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
BootStrap的两种模态框方式
May 10 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
javascript读取本地文件和目录方法详解
Aug 06 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
用PHP实现小型站点广告管理(修正版)
2006/10/09 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
js闭包实例汇总
2014/11/09 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
python 的列表遍历删除实现代码
2020/04/12 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
python 实现单通道转3通道
2019/12/03 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
分享一个python的aes加密代码
2020/12/22 Python
自荐信格式范文
2013/10/07 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
经销商会议开幕词
2016/03/04 职场文书
Python如何配置环境变量详解
2021/05/18 Python
js不常见操作运算符总结
2021/11/20 Javascript