在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;
 }

完成啦！

以上這篇Vue 實現v-for迴圈的時候更改 class的樣式名稱就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。