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 相关文章推荐
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
js闭包的用途详解
Nov 09 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 Javascript
原生JS实现拖拽功能
Dec 16 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 max_execution_time执行时间问题
2011/07/17 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
Vue实现简易计算器
2020/02/25 Javascript
Python实现密码薄文件读写操作
2019/12/16 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
详解python中的lambda与sorted函数
2020/09/04 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
Python图像读写方法对比
2020/11/16 Python
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
家长评语和期望
2014/02/10 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
党支部承诺书范文
2014/03/28 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
基层工作经验证明样本
2014/11/16 职场文书
入党函调证明材料
2015/06/19 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL