Vue 根據(jù)條件判斷van-tab的顯示方式
我就廢話不多說了,大家還是直接看代碼吧~
.vue
<van-tabs v-model='activeTab'> <van-tab v-if='isShow'></van-tab> <van-tab></van-tab></van-tabs>
.ts
private activeTab = 0;
private isShow = false;
補(bǔ)充知識:vue elui 使用v-if 判斷tab時樣式錯亂
項目中用el ui 的tab顯示數(shù)據(jù)
6個數(shù)組的數(shù)據(jù)不同 所以用了 v-if 來判斷
但是同樣的數(shù)據(jù),顯示出來的樣式亂七八糟
查了半天才知道 是因為沒有加上 key值,所以才會渲染錯亂。具體原因也不知道。
只要在table 加上key 就可以了
<el-table v-if='personalType==’publicNumber’' :data='publicNumberArray' key='publicNumber' >
vue的循環(huán)也是,如果不加上 絕對不同的key 可能就會出 .length 錯誤或者 一些簡單的數(shù)組錯誤
還不放心,也可以給key加一個 隨機(jī)數(shù) 就可以了
key='Math.random()'
以上這篇Vue 根據(jù)條件判斷van-tab的顯示方式就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 解決Android studio xml界面無法預(yù)覽問題2. 什么是python的自省3. Springboot Druid 自定義加密數(shù)據(jù)庫密碼的幾種方案4. Spring Boot和Thymeleaf整合結(jié)合JPA實現(xiàn)分頁效果(實例代碼)5. 詳解Android studio 動態(tài)fragment的用法6. Vuex localStorage的具體使用7. php模擬實現(xiàn)斗地主發(fā)牌8. IntelliJ IDEA安裝插件的方法步驟9. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應(yīng)用實現(xiàn)10. 使用Android studio查看Kotlin的字節(jié)碼教程

網(wǎng)公網(wǎng)安備