实现效果
代码如下:
TabControl.vue
<template>
<div>
<div class="tab-control">
<div v-for='(item,index) in titles' :key='index' :class="{active:index === currentIndex}" @click='tabClick(index)'>
<span>{
{item}}</span>
</div>
</div>
<div class="item" :class="{show:currentIndex == 0}">
选项0
</div>
<div class="item" :class="{show:currentIndex == 1}">
选项1
</div>
<div class="item" :class="{show:currentIndex == 2}">
选项2
</div>
</div>
</template>
<script>
export default {
name:"TabControl",
props:{
titles:{
type:Array,
default(){
return []
}
},
content:{
type:Array,
}
},
data(){
return {
currentIndex:0
}
},
methods: {
tabClick(index){
this.currentIndex = index;
}
},
}
</script>
<style>
.tab-control{
width: 300px;
height: 60px;
display: flex;
}
.tab-control div{
flex: 1;
width: 100px;
font-size: 20px;
}
.active{
color:red;
}
.item{
display: none;
}
.show{
display: block;
}
</style>
App.vue
<template>
<div id="app">
<tab-control :titles='["推荐","关注","流行"]'></tab-control>
</div>
</template>
<script>
import TabControl from './components/TabControl.vue'
export default {
name: 'App',
components: {
TabControl
}
}
</script>
<style>
</style>