给v-for遍历出来的每个元素单独加一个样式

给v-for遍历出来的每个元素单独加一个样式

先看官方文档ClassStyle的绑定使用数组语法时,我们可以:

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样式。
tab栏效果图

# VUE
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×