vue实现tab选项卡切换

时间:2021-09-25 22:47:35
上代码:
<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是由于几个组件切换时并未刷新整个页面,不方便几个页面数据同步