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 相关文章推荐
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
理解AngularJs指令
2015/12/10 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
Python3 socket同步通信简单示例
2017/06/07 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
python中lambda()的用法
2017/11/16 Python
详解python深浅拷贝区别
2019/06/24 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
python中元组的用法整理
2020/06/15 Python
python中time、datetime模块的使用
2020/12/14 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
即将毕业大学生自荐信
2014/01/24 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
应急管理工作总结2015
2015/05/04 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript