1. 程式人生 > >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;
            }
        }