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 json 新手入门文档
Dec 03 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
PHP递归创建多级目录
2015/11/05 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
python logging日志模块的详解
2017/10/29 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
django 模型字段设置默认值代码
2020/07/15 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
2014年化验员工作总结
2014/11/18 职场文书
工作态度检讨书范文
2015/05/06 职场文书
小学校本教研总结
2015/08/13 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
导游词之长城八达岭
2019/09/24 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
redis中lua脚本使用教程
2021/11/01 Redis
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python