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 相关文章推荐
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
在Uni中使用Vue的EventBus总线机制操作
Jul 31 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/HTML混写的四种方式总结
2017/02/27 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
Python对数据库操作
2016/03/28 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
python修改FTP服务器上的文件名
2019/09/11 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
python实现逻辑回归的示例
2020/10/09 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
家长会学生家长演讲稿
2013/12/29 职场文书
安全生产汇报材料
2014/02/17 职场文书
仓库主管岗位职责
2014/03/02 职场文书
文艺晚会策划方案
2014/06/11 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
表扬通报怎么写
2015/01/16 职场文书
初中信息技术教学计划
2015/01/22 职场文书
家长会欢迎词
2015/01/23 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
小学数学教师研修日志
2015/11/13 职场文书
MySQL 服务和数据库管理
2021/11/11 MySQL
Oracle表空间与权限的深入讲解
2021/11/17 Oracle
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers