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 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
实例详解Node.js 函数
Jun 10 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 Javascript
javascript函数式编程基础
Sep 15 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
桌面中心(一)创建数据库
2006/10/09 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
Python 读写文件的操作代码
2018/09/20 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
python怎么调用自己的函数
2020/07/01 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
求职毕业生自荐书
2014/02/08 职场文书
党员承诺书怎么写
2014/05/20 职场文书
自荐信格式范文
2015/03/04 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫