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 相关文章推荐
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
【js设计模式】SOLID五大设计原则
Mar 24 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错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
JavaScript字符串检索字符的方法
2017/06/23 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
Python使用Supervisor来管理进程的方法
2015/05/28 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
上海方立数码笔试题
2013/10/18 面试题
大专会计自我鉴定
2014/02/06 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
善意的谎言事例
2014/02/15 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
体检通知范文
2015/04/21 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript