Vue 根据条件判断van-tab的显示方式

 更新时间:2020年08月03日 09:24:04   作者:勋勋勋勋小勋勋  
这篇文章主要介绍了Vue 根据条件判断van-tab的显示方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

我就废话不多说了,大家还是直接看代码吧~

.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的显示方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 安装vue无法运行、此系统无法运行脚本问题及解决

    安装vue无法运行、此系统无法运行脚本问题及解决

    这篇文章主要介绍了安装vue无法运行、此系统无法运行脚本问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue3+vite+axios 配置连接后端调用接口的实现方法

    vue3+vite+axios 配置连接后端调用接口的实现方法

    这篇文章主要介绍了vue3+vite+axios 配置连接后端调用接口的实现方法,在vite.config.ts文件中添加配置,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue 实现手动分割日期

    vue 实现手动分割日期

    这篇文章主要介绍了vue 实现手动分割日期,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue3设置Proxy代理解决跨域问题

    Vue3设置Proxy代理解决跨域问题

    这篇文章主要介绍了Vue3设置Proxy代理解决跨域问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • Vue中实现路由跳转的三种方式(超详细整理)

    Vue中实现路由跳转的三种方式(超详细整理)

    这篇文章给大家详细的整理了Vue中实现路由跳转的三种方式,使用vue-router,声明式-router-link,编程式这三种方法,分别有详细的代码示例,需要的朋友可以参考下
    2023-09-09
  • 解决vue动态为数据添加新属性遇到的问题

    解决vue动态为数据添加新属性遇到的问题

    今天小编就为大家分享一篇解决vue动态为数据添加新属性遇到的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue项目中vue.config.js文件详解

    vue项目中vue.config.js文件详解

    vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载,这篇文章主要介绍了vue项目中vue.config.js文件的介绍,需要的朋友可以参考下
    2024-02-02
  • 详解Vue中watch的详细用法

    详解Vue中watch的详细用法

    在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-11-11
  • Vue组件化开发的必备技能之组件递归

    Vue组件化开发的必备技能之组件递归

    组件是可以在它们自己的模板中调用自身的,不过它们只能通过 name 选项来做这件事,下面这篇文章主要给大家介绍了关于Vue组件化开发的必备技能之组件递归的相关资料,需要的朋友可以参考下
    2022-01-01
  • vue中button标签样式和功能禁用的写法

    vue中button标签样式和功能禁用的写法

    这篇文章主要介绍了vue中button标签样式和功能禁用的写法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论