tab按钮样式 vue_vue实现tab选项卡切换

上代码：

//点击按钮

//tab被点击的几个按钮需要被循环出来，方便获取其index

//点击事件，通过被选择的按钮(index)给自定义属性赋值

@click="clickTab(index)"

//让被选择的选项卡按钮与众不同，改变样式

:class="{selected:curTab==index}">{{item}}

//选项卡内容(放在一个大的div中)

   //自定义属性的值被改变时，通过v-if(v-show)判断显示被选择的选项卡内容

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      //点击事件给自定义属性赋值

}

}

}

.selected{

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

background-size: 100% 100%!important;

background-repeat: no-repeat!important;

}

*1.这里使用v-if是由于几个组件切换时并未刷新整个页面，不方便几个页面数据同步