vue實現tab選項卡切換

上代碼：

<template>

  <div class="push">

     //點擊按鈕

    <div class="tab">

　　//tab被點擊的幾個按鈕須要被循環出來，方便獲取其index

        <span v-for="(item,index) in strands" :key="index" 

       //點擊事件，經過被選擇的按鈕（index）給自定義屬性賦值

　　@click="clickTab(index)"

       //讓被選擇的選項卡按鈕不同凡響，改變樣式

       :class="{selected:curTab==index}">{{item}}</span>

    </div>

    //選項卡內容（放在一個大的div中）

    <div class="content">

        <span v-if="curTab==0">   //自定義屬性的值被改變時，經過v-if（v-show）判斷顯示被選擇的選項卡內容

            <Push0></Push0>       

        </span>

        <span v-if="curTab==1">

            <Push1></Push1>

        </span>

        <span v-if="curTab==2">

            <Push2></Push2>

        </span>

        <span v-if="curTab==3">

            <Push3></Push3>

        </span>

        <span v-if="curTab==4">

            <Push4></Push4>

        </span>

    </div>

  </div>

</template>

<script>

import Push0 from'../components/push/push0'

import Push1 from'../components/push/push1'

import Push2 from'../components/push/push2'

import Push3 from'../components/push/push3'

import Push4 from'../components/push/push4'

export default {

    name: "push",

    data(){

        return{

            strands:['精彩賽事','個人好友','體育賽事','熱門精選','更多信息'],

            curTab:0                  //自定義屬性賦值0，頁面剛加載顯示的組件

        }

    },

    components:{

        Push0,

        Push1,

        Push2,

        Push3,

        Push4,

    },

    methods:{

      clickTab(index){

          this.curTab=index      //點擊事件給自定義屬性賦值

      } 

    } 

}

</script>

<style scoped>

.selected{

    background: url(../assets/img/push/glod.png)!important;

    background-size: 100% 100%!important;

    background-repeat: no-repeat!important;

}

</style>

*1.這裏使用v-if是因爲幾個組件切換時並未刷新整個頁面，不方便幾個頁面數據同步