vue中的選項卡

通過v-show去切換你的選項卡

視圖
<div class="nav">
       <span @click="select=1" :class="[select==1?'active':'']">推薦音樂</span>
       <span @click="select=2" :class="[select==2?'active':'']">排行榜</span>
       <span @click="select=3" :class="[select==3?'active':'']">搜索</span>
     </div> -->
​
<div v-show="select==1" class="content">推薦音樂的內容</div>
<div v-show="select==2" class="content">排行榜</div>
<div v-show="select==3" class="content">搜索的內容</div>
​
代碼邏輯中
data:{
 select:1
}

通過v-if去操控組件

視圖
<div class="nav">
       <span @click="select=1" :class="[select==1?'active':'']">推薦音樂</span>
       <span @click="select=2" :class="[select==2?'active':'']">排行榜</span>
       <span @click="select=3" :class="[select==3?'active':'']">搜索</span>
     </div> -->
​
<commend v-if='select==1'></commend>
<rank v-if='select==2'></rank>
<search v-if='select==3'></search>
​
代碼邏輯中
data:{
 select:1
}

通過動態is組件去切換

視圖
<div class="nav">
       <span @click="changeTab='commend'" :class="[changeTab=='commend'?'active':'']">推薦音樂</span>
       <span @click="changeTab='rank'" :class="[changeTab=='rank'?'active':'']">排行榜</span>
       <span @click="changeTab='search'" :class="[changeTab=='search'?'active':'']">搜索</span>
     </div>
<component :is='changeTab'></component>
代碼
data:{
 changeTab:'commend'
}

緩存組件

有一些組件內容，不需要變化，我們利用動態is組件切換的時候，每一次都重新加載dom，浪費性能
組件緩存的標簽
<keep-alive>
 <組件名稱></組件名稱>
</keep-alive>
它包裹的內容就會被緩存。緩存的時候，前四個生命周期函數，
beforeCreate/created/beforeMount/mounted 都只觸發一次。
​
還有一些需求，緩存組件中，某幾個組件，內容需要更新，
只有activated(){} 這個函數被觸發。 activated激活的意思
因為這個函數即使在緩存狀態下，依然會被觸發。