上代码:
//点击按钮
//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是由于几个组件切换时并未刷新整个页面,不方便几个页面数据同步