日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
怎么解決使用vue-router與v-if實現(xiàn)tab切換遇到的問題

這篇文章主要介紹怎么解決使用vue-router與v-if實現(xiàn)tab切換遇到的問題，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

十余年專注成都網(wǎng)站制作，企業(yè)網(wǎng)站建設，個人網(wǎng)站制作服務，為大家分享網(wǎng)站制作知識、方案，網(wǎng)站設計流程、步驟,成功服務上千家企業(yè)。為您提供網(wǎng)站建設,網(wǎng)站制作,網(wǎng)頁設計及定制高端網(wǎng)站建設服務,專注于企業(yè)網(wǎng)站建設,高端網(wǎng)頁制作,對成都咖啡廳設計等多個領域，擁有多年的網(wǎng)站設計經(jīng)驗。

先上代碼，用兩種方式實現(xiàn)的效果

使用vue-router

router

import Tab1 from './components/tab/TabOne'
import Tab2 from './components/tab/TabTwo'
import Tab3 from './components/tab/TabThree'
import Tab4 from './components/tab/TabFour'
const routes = [
 {path: '/tab1', component: Tab1},
 {path: '/tab2', component: Tab2},
 {path: '/tab3', component: Tab3},
 {path: '/tab4', component: Tab4},
]
const router = new VueRouter({
 routes
})

.vue 文件中


 tab1
 tab2
 tab3
 tab4
 

使用 v-if/v-show

.vue


 tab1
 tab2
 tab3
 tab4
 
 
 
 
/**  * script  */  data () {   return {    isShow: 1   }  },  methods: {   handleTab (v) {    this.isShow = v   }  }

效果如下

怎么解決使用vue-router與v-if實現(xiàn)tab切換遇到的問題

  • 上方為路由

  • 下方為v-if

目前看起來效果一致。那就從另一個角度考慮，頁面結構。

vue-router

怎么解決使用vue-router與v-if實現(xiàn)tab切換遇到的問題

v-if

怎么解決使用vue-router與v-if實現(xiàn)tab切換遇到的問題

以上是“怎么解決使用vue-router與v-if實現(xiàn)tab切換遇到的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！


新聞名稱：怎么解決使用vue-router與v-if實現(xiàn)tab切換遇到的問題
轉載源于：http://www.dlmjj.cn/article/jejhcc.html