Vue 根据条件判断van-tab的显示方式


Posted in Javascript onAugust 03, 2020

我就废话不多说了,大家还是直接看代码吧~

.vue

<van-tabs v-model="activeTab">
    <van-tab title="XXX" v-if="isShow"></van-tab>
    <van-tab title="XXX"></van-tab>
</van-tabs>

.ts

private activeTab = 0;

private isShow = false;

补充知识:vue elui 使用v-if 判断tab时样式错乱

项目中用el ui 的tab显示数据

6个数组的数据不同 所以用了 v-if 来判断

但是同样的数据,显示出来的样式乱七八糟

查了半天才知道 是因为没有加上 key值,所以才会渲染错乱。具体原因也不知道。

只要在table 加上key 就可以了

<el-table v-if="personalType=='publicNumber'" :data="publicNumberArray" key="publicNumber" >

vue的循环也是,如果不加上 绝对不同的key 可能就会出 .length 错误或者 一些简单的数组错误

还不放心,也可以给key加一个 随机数 就可以了

key="Math.random()"

以上这篇Vue 根据条件判断van-tab的显示方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
列表内容的选择
Jun 30 Javascript
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
关于延迟加载JavaScript
May 05 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 #Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 #Javascript
js实现点击上传图片并设为模糊背景
Aug 02 #Javascript
jQuery实现雪花飘落效果
Aug 02 #jQuery
原生js+canvas实现贪吃蛇效果
Aug 02 #Javascript
js+canvas实现五子棋小游戏
Aug 02 #Javascript
js实现3D旋转相册
Aug 02 #Javascript
You might like
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
JavaScript Timer实现代码
2010/02/17 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
Python中一行和多行import模块问题
2018/04/01 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
出国留学自荐信
2013/10/25 职场文书
公司董事长职责
2013/12/12 职场文书
教师绩效工资方案
2014/02/01 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
幼师个人总结范文
2015/02/28 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
交通安全温馨提示语
2015/07/14 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis