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

AspNetSunny

于 2018-09-04 17:01:36 发布

阅读量5.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/sunnywuxian/article/details/82386503

vue 专栏收录该内容

11 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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