我是靠谱客的博主 凶狠刺猬,这篇文章主要介绍vue——如何给v-for循环出来的元素设置不同的样式,现在分享给大家,希望可以做个参考。

第一步:给要循环的盒子动态绑定class名 并且传入一个数组


<div v-for="(i,a) in serve" class="sever_box2">
<div :class="sstt[a]">
<img :src="i.imgs" alt=""/>
<router-link :to="i.url">
<span>{{i.title}}</span>
</router-link>
<p>{{i.english}}</p>
</div>
</div>

第二步:在data中定义这个数组

data() {
return {
sstt: [
"ss1",
"ss2",
"ss3",
"ss4",
]
}

第三步:在style中分别设置颜色

.ss1{
background: #71b262;
}
.ss2{
background: #6288b2;
}
.ss3 {
background: #ecac60;
}
.ss4{
background: #f87171;
}

OK,完成了。

最后

以上就是凶狠刺猬最近收集整理的关于vue——如何给v-for循环出来的元素设置不同的样式的全部内容,更多相关vue——如何给v-for循环出来内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(62)

评论列表共有 0 条评论

立即
投稿
返回
顶部