vue实现tab选项卡切换
Posted wd163
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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是由于几个组件切换时并未刷新整个页面，不方便几个页面数据同步
以上是关于vue实现tab选项卡切换的主要内容，如果未能解决你的问题，请参考以下文章
Hbuilder MUI选项卡怎么样用js使其切换到指定的TAB