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 相关文章推荐
浅谈下拉菜单中的Option对象
May 10 Javascript
js电话号码验证方法
Sep 28 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
详解JavaScript中return的用法
May 08 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 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获取金书网的书名的实现代码
2010/06/11 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
Python编程之Re模块下的函数介绍
2017/10/28 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Django实现组合搜索的方法示例
2018/01/23 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
报关员个人职业生涯规划书
2014/03/12 职场文书
2014年三万活动总结
2014/04/26 职场文书
培训科主任岗位职责
2014/08/08 职场文书
民间个人借款协议书
2014/09/30 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
2014年材料员工作总结
2014/11/19 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android