欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用vue-router與v-if實(shí)現(xiàn)tab切換遇到的問(wèn)題及解決方法

 更新時(shí)間：2018年09月07日 08:57:42   作者：木石心  
這篇文章主要介紹了vue-router與v-if實(shí)現(xiàn)tab切換的思考,需要的朋友可以參考下

vue-router 該如何使用

忽然碰到一個(gè)常見(jiàn)的問(wèn)題，明明可以使用 v-if / v-show 可以的解決的問(wèn)題，有沒(méi)有必要是使用 vue-router來(lái)解決。 比如常見(jiàn)的 tab 切換。一時(shí)間，我有些猶豫了，有沒(méi)有必要濫用 vue-router。那到底何時(shí)用才叫合理呢？

先上代碼，用兩種方式實(shí)現(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 文件中

<div class="tab">
 <router-link to="/tab1">tab1</router-link>
 <router-link to="/tab2">tab2</router-link>
 <router-link to="/tab3">tab3</router-link>
 <router-link to="/tab4">tab4</router-link>
 <router-view></router-view>
</div>

使用 v-if/v-show

.vue

<div class="tab">
 <button @click="handleTab(1)">tab1</button>
 <button @click="handleTab(2)">tab2</button>
 <button @click="handleTab(3)">tab3</button>
 <button @click="handleTab(4)">tab4</button>
 <div v-if="isShow === 1"><Tab1 /></div>
 <div v-if="isShow === 2"><Tab2 /></div>
 <div v-if="isShow === 3"><Tab3 /></div>
 <div v-if="isShow === 4"><Tab4 /></div>
</div>
/**
 * script
 */
 data () {
  return {
   isShow: 1
  }
 },
 methods: {
  handleTab (v) {
   this.isShow = v
  }
 }

效果如下

  • 上方為路由
  • 下方為v-if

目前看起來(lái)效果一致。那就從另一個(gè)角度考慮，頁(yè)面結(jié)構(gòu)。

vue-router

v-if

總結(jié)：

  • 目前看起來(lái)，效果沒(méi)有很大區(qū)別，代碼量也沒(méi)有減少
  • 使用原生，可能是用索引進(jìn)行關(guān)聯(lián)，在vue中推薦使用 數(shù)據(jù)進(jìn)行驅(qū)動(dòng)
  • 暫且記錄一筆，以待后期繼續(xù)研究

以上所述是小編給大家介紹的vue-router與v-if實(shí)現(xiàn)tab切換的思考，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論