方法1:
<template>
<div class="container">
<div class="tabs">
<div class="tab" @click="handClick(0)">关注</div>
<div class="tab" @click="handClick(1)">推荐</div>
<div class="tab" @click="handClick(2)">历史</div>
<div class="tab" @click="handClick(3)">汽车</div>
</div>
<div class="tab-contents">
<div class="tab-content" v-show="activeIndex === 0">你的关注内容</div>
<div class="tab-content" v-show="activeIndex === 1">为你推荐一段视频</div>
<div class="tab-content" v-show="activeIndex === 2">历史内容</div>
<div class="tab-content" v-show="activeIndex === 3">电动车的未来</div>
</div>
</div>
</template>
<script>
export default {
name: "tab2",
data() {
return {
activeIndex: 0,
};
},
methods:{
handClick( val ) {
this.activeIndex = val
}
}
};
</script>
<style lang="less" scoped>
.container {
cursor: pointer;
.tabs {
display: flex;
margin-bottom: 20px;
.tab {
margin-right: 20px;
}
}
.tab-contents {
display: flex;
// .tab-content {
// display: none;
// }
}
}
</style>
方法2:
<template>
<div class="container">
<div class="tabs">
<div class="tab" v-for="(item,index) in list" :key="index" @click="activeIndex = index">{
{item.name}}</div>
</div>
<div class="tab-contents">
<div class="tab-content" v-for="(item,index) in tabList" :key="index" v-show="activeIndex === index">{
{item.name}}</div>
</div>
</div>
</template>
<script>
export default {
name: "tab2",
data() {
return {
activeIndex: 0,
list: [
{
id: 1,
name: "关注",
},
{
id: 2,
name: "推荐",
},
{
id: 3,
name: "历史",
},
{
id: 4,
name: "汽车",
},
],
tabList:[
{
id:1,
name:'你的关注内容',
}, {
id:2,
name:'为你推荐一段视频',
}, {
id:3,
name:'历史内容',
}, {
id:4,
name:'电动车的未来',
},
]
};
},
methods:{
// handClick( val ) {
// this.activeIndex = val
// }
}
};
</script>
<style lang="less" scoped>
.container {
cursor: pointer;
.tabs {
display: flex;
margin-bottom: 20px;
.tab {
margin-right: 20px;
}
}
.tab-contents {
display: flex;
// .tab-content {
// display: none;
// }
}
}
</style>