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 相关文章推荐
Dom 结点创建 基础知识
Oct 01 Javascript
js确定对象类型方法
Mar 30 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
在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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
jQuery each()小议
2010/03/18 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
python中常见错误及解决方法
2020/06/21 Python
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
销售演讲稿范文
2014/01/08 职场文书
生日寿宴答谢词
2014/01/19 职场文书
黄河的主人教学反思
2014/02/07 职场文书
王老吉广告词
2014/03/20 职场文书
大学活动总结范文
2014/04/29 职场文书
保护环境倡议书100字
2014/05/19 职场文书
现场活动策划方案
2014/08/22 职场文书
工程部主管岗位职责
2015/02/12 职场文书
医院感染管理制度
2015/08/05 职场文书
Java内存模型之happens-before概念详解
2021/06/13 Java/Android