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

赞 (0)

相关推荐

  • 详解使用vue实现tab 切换操作

    在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的index值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉: $('.tab .title').find('.item') .removeClass('current').eq(index).addClass('current'); // 为index位置的title添加current $('.tab .content').find('.item') .hide().eq(index).show()

  • vue2.0多条件搜索组件使用详解

    vue2.0多条件搜索组件使用详解

    本文为大家分享了vue2.0多条件搜索组件的实现方法,供大家参考,具体内容如下 搜索条件为死数据,通过select下拉,选取多个条件:同时可点击加号增加搜索条件,点击减号减少搜索条件: templete <template> <div class="retrievalmian"> <div class="retrievaltitle"> <a class="btn-default tabbtn" @cli

  • Vue.js实现tab切换效果

    Vue是一个小巧轻便的JavaScript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 目前在学习Vue.js.在学习的时候需要把手动操作DOM的思维去掉,因为Vue是数据驱动,不需要手动操作DOM.他通过一些特殊的hmtl语法,将DOM和数据绑定起来.一旦创建了绑定,DOM就会和数据保持同步,每当变更了数据,DOM也会相应的发生改变,更新. 下面是我用vue.js来实现的tab切换功能. <!--这里

  • 详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）

    详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）

    在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件. 因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使用的是动态组件实现,如果是在大型应用上,可能使用 vue-router 会方便一些. 先看下最终实现的效果,结构比较简单,顶部的三个 Tab 标签用于切换,内容区域分别为三个子组件. 效果预览 关键代码及分析如下: <template> // 每一个 tab 绑定了一个点击事件,传入的参数对应着

  • 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; priva

  • vue实现条件判断动态绑定样式的方法

    在我们做前端页面的时候,为了美观和直观,我们希望通过条件判断来让页面显示不同的样式,如下图所示: 当值为"是"时,显示绿色的标签,当值为"否"时,显示为灰色的标签. 标签的样式分别为: <el-tag type="success">绿色标签</el-tag> <el-tag type="info">灰色标签</el-tag> 关键在于type的样式部分,我们利用vue的样式绑定,

  • vue 如何根据条件判断属性的添加和去除

    目录 根据条件判断属性的添加和去除 解决方法 Vue 的条件判断语句 v-if v-else v-else-if v-show v-if 与 v-show 的区别 根据条件判断属性的添加和去除 写一个列表,然后想要在查询数据的过程中添加loading样式,这个时候需要添加一个loading属性,但是添加之后会有直接展示loading. 解决方法 :loading = isLoading 在下面需要注册isLoading为boolean类型,如下: isLoading:false/true 然后在

  • vue三元运算之多重条件判断方式(多个枚举值转译)

    目录 vue多重条件判断(多个枚举值转译) vue标签中使用三元运算符 vue多重条件判断(多个枚举值转译) 直接上代码: div class="msgLi">      <p>组织设置:</p>      <p>{{ organInfo.partySetup=="1"?"撤销":organInfo.partySetup=="2"?"调整":organInfo.pa

  • VUE中V-IF条件判断改变元素的样式操作

    方法一 v-if判断后用标签改变样式(特定显示列字体加粗) <v-list dense> <template v-for="(col,i) in cols"> <v-list-item :key="i" v-if="col.text=='商品码'||col.text=='通用名称'"> <v-list-item-content><b>{{col.text}}</b></

  • vue如何根据条件判断按钮是否可以点击

    vue如何根据条件判断按钮是否可以点击

    目录 根据条件判断按钮是否可以点击 方法一:使用v-if .v-else 来判断 方法二:增加一个变量,判断 vue判断点击当前元素 需要判断你是点击了遮罩层还是form表单 接下来是分别对e.currentTarget.e.target打印 根据条件判断按钮是否可以点击 按钮当在特定环境下不可点击,需要根据判断来控制点击事件. 方法一:使用v-if .v-else 来判断 <template>     <div>         <el-button v-if="

  • Spring Boot中的那些条件判断的实现方法

    Spring Boot中的那些Conditional spring boot中为我们提供了丰富的Conditional来让我们得以非常方便的在项目中向容器中添加Bean.本文主要是对各个注解进行解释并辅以代码说明其用途. 所有ConditionalOnXXX的注解都可以放置在class或是method上,如果方式在class上,则会决定该class中所有的@Bean注解方法是否执行. @Conditional 下面其他的Conditional注解均是语法糖,可以通过下面的方法自定义Conditi

  • Vue根据条件添加click事件的方式

    需求:根据特定条件,增加或者去掉click事件(例如:clickFlag == true时,添加click事件:clickFlag == false时,去掉click事件:) 解决方法: 方式一:在绑定事件中直接添加标示量clickFlag <div @click="clickFlag && addGoodsHandler()"> 添加产品 </div> 方式二:用v-if .v-else-if.v-else 判断 <div v-if=&q

  • vue根据条件不同显示不同按钮的操作

    我就废话不多说了,大家还是直接看代码吧~ <template slot-scope="scope"> <el-button v-if="scope.row.isDeleted === 0" @click="lowerShelf(scope.row.id)" size="mini" type="primary" plain>下架</el-button> <el-but

  • vue使用动态组件实现TAB切换效果

    vue使用动态组件实现TAB切换效果

    问题描述 tab切换的场景在开发中会经常用到.当需要实现这种效果的时候,我们常常会想到下面的方式去实现这个效果. 方式一 使用display:none;去控制dom元素的显示与隐藏.从而实现,两个tab的显示与隐藏.不过如果有三四个tab要切换的话,这种方式就不可取了. 方式二 使用vue中的指令v-if或者v-show实现.这种方式可以实现,不过代码写的不优雅.试想一个.vue文件中出现一大把v-if是什么样的效果?而且使用v-if还得声明很多的变量去做标识.所以不是十分好的的解决方案 方式三

随机推荐