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無(wú)法運(yùn)行、此系統(tǒng)無(wú)法運(yùn)行腳本問(wèn)題及解決
這篇文章主要介紹了安裝vue無(wú)法運(yùn)行、此系統(tǒng)無(wú)法運(yùn)行腳本問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3+vite+axios?配置連接后端調(diào)用接口的實(shí)現(xiàn)方法
這篇文章主要介紹了vue3+vite+axios?配置連接后端調(diào)用接口的實(shí)現(xiàn)方法，在vite.config.ts文件中添加配置，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue?實(shí)現(xiàn)手動(dòng)分割日期，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue3設(shè)置Proxy代理解決跨域問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式(超詳細(xì)整理)
這篇文章給大家詳細(xì)的整理了Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式,使用vue-router,聲明式-router-link,編程式這三種方法,分別有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
解決vue動(dòng)態(tài)為數(shù)據(jù)添加新屬性遇到的問(wèn)題
今天小編就為大家分享一篇解決vue動(dòng)態(tài)為數(shù)據(jù)添加新屬性遇到的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue項(xiàng)目中vue.config.js文件詳解
vue.config.js?是一個(gè)可選的配置文件,如果項(xiàng)目的?(和?package.json?同級(jí)的)?根目錄中存在這個(gè)文件,那么它會(huì)被?@vue/cli-service?自動(dòng)加載,這篇文章主要介紹了vue項(xiàng)目中vue.config.js文件的介紹,需要的朋友可以參考下2024-02-02
在vue中，使用watch來(lái)響應(yīng)數(shù)據(jù)的變化。watch的用法大致有三種。下面代碼是watch的一種簡(jiǎn)單的用法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-11-11
組件是可以在它們自己的模板中調(diào)用自身的,不過(guò)它們只能通過(guò)?name?選項(xiàng)來(lái)做這件事,下面這篇文章主要給大家介紹了關(guān)于Vue組件化開發(fā)的必備技能之組件遞歸的相關(guān)資料,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了vue中button標(biāo)簽樣式和功能禁用的寫法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04