使用场景
封装了一个导航栏,其中的个别选项的样式需要单独调整,但是标签是V-for生成的怎么办呢?
代码展示
<div v-for="(item, index) in items" :key="index">
<div :class="itemsstyle[index]">{{ item }}</div>
</div>
在vue实例对象中的data里
data(){
itemsstyle: ["item0", "item1", "item2", "item3", "item4"],
}
根据下标可以为每一个标签绑定我们想要的类名
<style>
.item0 {
background-color: red;
}
.item1 {
background-color: pink;
}
.item2 {
background-color: green;
}
.item3 {
background-color: yellow;
}
.item4 {
background-color: gray;
}
</style>