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激活的意思
因为这个函数即使在缓存状态下，依然会被触发。