Vue v-for循环的时候更改 class的样式名称

最新推荐文章于 2024-02-28 16:43:21 发布

原创最新推荐文章于 2024-02-28 16:43:21 发布 · 5.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在Vue.js中利用v-bind:class结合循环(v-for)为元素动态分配样式类，通过一个示例展示了如何根据索引随机选择颜色主题。

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