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 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
vue 子组件修改data或调用操作
Aug 07 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日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
分享PHP header函数使用教程
2013/09/05 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
window.print打印指定div实例代码
2013/12/13 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
理解python多线程(python多线程简明教程)
2014/06/09 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
会计专业应届生自荐信
2014/02/07 职场文书
安全生产承诺书范文
2014/05/22 职场文书
可怜妈妈观后感
2015/06/09 职场文书
毕业典礼致辞
2015/07/29 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers