Vue 根據(jù)條件判斷van-tab的顯示方式
我就廢話不多說(shuō)了，大家還是直接看代碼吧~
.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;
補(bǔ)充知識(shí)：vue elui 使用v-if 判斷tab時(shí)樣式錯(cuò)亂
項(xiàng)目中用el ui 的tab顯示數(shù)據(jù)
6個(gè)數(shù)組的數(shù)據(jù)不同 所以用了 v-if 來(lái)判斷
但是同樣的數(shù)據(jù)，顯示出來(lái)的樣式亂七八糟
查了半天才知道 是因?yàn)闆]有加上 key值，所以才會(huì)渲染錯(cuò)亂。具體原因也不知道。
只要在table 加上key 就可以了
<el-table v-if="personalType=='publicNumber'" :data="publicNumberArray" key="publicNumber" >
vue的循環(huán)也是，如果不加上 絕對(duì)不同的key 可能就會(huì)出 .length 錯(cuò)誤或者 一些簡(jiǎn)單的數(shù)組錯(cuò)誤
還不放心，也可以給key加一個(gè) 隨機(jī)數(shù) 就可以了
key="Math.random()"
以上這篇Vue 根據(jù)條件判斷van-tab的顯示方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue中數(shù)據(jù)更新視圖不更新問(wèn)題this.$set()方法
這篇文章主要介紹了解決vue中數(shù)據(jù)更新視圖不更新問(wèn)題this.$set()方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家詳細(xì)介紹了Vue中webpack的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
淺析vue-router jquery和params傳參(接收參數(shù))$router $route的區(qū)別
今天做項(xiàng)目時(shí)踩到了vue-router傳參的坑（jquery和params），所以決定總結(jié)一下二者的區(qū)別。感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
這篇文章主要介紹了Element Input組件分析小結(jié)，詳細(xì)的介紹了Input組件的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
vue計(jì)算屬性+vue中class與style綁定(推薦)
這篇文章主要介紹了vue計(jì)算屬性+vue中class與style綁定,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
Vue tagsview實(shí)現(xiàn)多頁(yè)簽導(dǎo)航功能流程詳解
基本上后臺(tái)管理系統(tǒng)都需要有多頁(yè)簽的功能，但是因?yàn)橐恍┠_手架項(xiàng)目基本都把這個(gè)功能給集成好了，導(dǎo)致在學(xué)習(xí)或者修改的時(shí)候不知道該如何下手。今天這篇文章就來(lái)聊一聊，vue-element-admin項(xiàng)目是如何實(shí)現(xiàn)多頁(yè)簽功能的2022-09-09
Vue中計(jì)算屬性未生效:原因、排查與解決過(guò)程
本文將深入探討計(jì)算屬性未生效的常見原因,并提供排查和解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
vue3使用element-plus再次封裝table組件的基本步驟
這篇文章主要介紹了vue3使用element-plus再次封裝table組件的基本步驟,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
vue使用JSEncrypt對(duì)密碼本地存儲(chǔ)時(shí)加解密的實(shí)現(xiàn)
本文主要介紹了vue使用JSEncrypt對(duì)密碼本地存儲(chǔ)時(shí)加解密，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
利用Vue3和Plotly.js創(chuàng)建交互式表格
在數(shù)據(jù)分析和可視化領(lǐng)域,經(jīng)常需要以表格的形式展示數(shù)據(jù),Plotly.js 是一款功能強(qiáng)大的 JavaScript 庫(kù),不僅可以創(chuàng)建交互式圖表,還可以動(dòng)態(tài)生成 HTML 表格,本文給大家介紹了如何用Vue3和Plotly.js創(chuàng)建交互式表格,需要的朋友可以參考下2024-07-07