Vue 实现实现v-for循环的时候更改循环的时候更改 class的样式名称的样式名称
主要介绍了Vue 实现v-for循环的时候更改 class的样式名称,具有很好的参考价值,希望对大家有所帮助。一起
跟随小编过来看看吧
在v-bind:class上绑定索引函数
<div v-for="(shop,index) in shoplist" style="max-width: 20rem;" v-bind:class="calculate(index)">
calculate(index) 此处必须添加index参数
data(){
return{
colorList:['primary','danger','secondary','info']
}
},
methods:{
calculate(index){
var nm = this.colorList[Math.floor(Math.random() * this.colorList.length)];
return "card mb-3 col-lg-3 border-"+nm;
}
}
补充知识:补充知识:vue——如何给如何给v-for循环出来的元素设置不同的样式循环出来的元素设置不同的样式
例如给循环出来的四个盒子设置不同的背景色
第一步:给要循环的盒子动态绑定第一步:给要循环的盒子动态绑定class名名 并且传入一个数组并且传入一个数组
<div v-for="(i,a) in serve" class="sever_box2">
<div :class="sstt[a]">
<img :src="i.imgs" alt="Vue 实现v-for循环的时候更改 class的样式名称"/>
<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;
}
完成啦!
评论0
最新资源