方法一:
<template>
<div>
<ul>
<li
v-for="(item,index) in tabsData"
:key="index"
:class="{active:tabIndex==index}"
@click="handleTabs(index)"
>{{item}}
</li>
</ul>
</div>
</template>
data(){
return{
tabsData: ["今日", "昨日", "明日"],
tabIndex:0
}
}
methods:{
handleTabs(index) {
this.tabIndex = index;
},
}
.active {
background: orange;
}
方法二:
<template>
<div>
<ul>
<li @click="handleTabs2(1)" :class="{tabs2Active:tabs2Index==1}">周一</li>
<li @click="handleTabs2(2)" :class="{tabs2Active:tabs2Index==2}">周二</li>
<li @click="handleTabs2(3)" :class="{tabs2Active:tabs2Index==3}">周三</li>
</ul>
</div>
</template>
data(){
return{
tabs2Index: 1,
}
},
methods:{
handleTabs2(index) {
console.log("index", index);
this.tabs2Index = index;
},
}
.tabs2Active {
color: rgb(190, 30, 123);
}
方法三:
<template>
<div>
<ul>
<li
v-for="(item,index) in tabs3Data"
:key="index"
@click="handleTab3(item)"
:class="['tabItem',item.isSelect?'tab3Active':'noselect']"
>{{item.name}}</li>
</ul>
</div>
</template>
data(){
return{
tabs3Data: [
{
id: 1,
name: "大",
isSelect: true,
},
{
id: 2,
name: "中",
isSelect: false,
},
{
id: 3,
name: "小",
isSelect: false,
},
],
}
},
methods:{
handleTab3(item) {
this.tabs3Data.forEach((item, index) => {
this.tabs3Data[index].isSelect = false;
});
item.isSelect = true;
// this.getData(item.name); //可以根据后端需要的字段去掉每个tab数据
},
}
.tab3Active {
color: rgb(2, 2, 2);
background: blueviolet;
}