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 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
javascript用函数实现对象的方法
May 14 Javascript
JavaScript函数基础详解
Feb 03 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 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
CentOS安装php v8js教程
2015/02/26 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
Python通过poll实现异步IO的方法
2015/06/04 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
django 外键model的互相读取方法
2018/12/15 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
银行演讲稿范文
2014/01/03 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
初中军训感想300字
2014/03/05 职场文书
银行求职信范文
2014/05/26 职场文书
文秘应届生求职信
2014/07/05 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书