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是由于几个组件切换时并未刷新整个页面，不方便几个页面数据同步