先看官方文档，Class与Style的绑定使用数组语法时，我们可以:
1
2
3
4
5
| <div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
|
渲染为：
1
| <div class="active text-danger"></div>
|
一、需求
1.写一个tab栏；
2.v-for循环出来的每个元素加不同的样式；
3.点击item有相应的active样式；
二、根据文档，我们可以组合使用class绑定
:class=”[ {active:activeIndex === index}, bg[index] ]”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div
v-for="(item,index) in tabList"
:key="index"
class="tab-item"
@click="clickTabItem(item,index)"
:class="[{active:activeIndex === index},bg[index]]"
>
{{item}}
</div>
data() {
return {
tabList: ['全部','最热','旅行','人文','打卡圣地','建筑','街头'],
bg:['all','recent','travel','culture','check','buildings','street'],
activeIndex: 0
};
},
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| .active{
color: #fff;
font-weight: bold;
text-decoration: underline;
}
.all{
background-color: #007AFF;
}
.recent{
background-color: #aaff00;
}
.travel{
background-color: #00ff00;
}
.culture{
background-color: #aaaa7f;
}
.check{
background-color: #55aa7f;
}
.buildings{
background-color: #5555ff;
}
.street{
background-color: #ff5500;
}
|
三、效果
字体颜色为白色，有下划线的为active样式。
