vue 使用v-for 动态修改class

最新推荐文章于 2025-06-11 19:50:48 发布

robbie.yang

最新推荐文章于 2025-06-11 19:50:48 发布

阅读量8.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/u013243347/article/details/88557992

Web前端专栏收录该内容

104 篇文章

订阅专栏

本文详细介绍如何在Vue.js中利用v-for指令结合自定义方法generateClassName，动态生成带有循环下标作为后缀的class名，如game_item-1、game_item-2等。这种方法在创建多个具有相似样式但需区分的元素时非常实用。

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

问题描述

通过v-for指令，按照index动态生成class

例如: .item-1 .item-2 .item-3 .item-4 .item-5 其中，1,2,3,4,5为循环遍历的下标。

实现原理

通过methods将index传入，并自定义返回值类型。

注意: 此处无法使用computed实现！！！

原因是computed是无法获取到当前遍历的index值，可以自己动手试一试。

源码实现

<template>
  <div class="game">
    <div class="game_item" v-for="(item,index) in gameList" :class="generateClassName(index)" :key="index">
        {{item}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'game',
  data () {
    return {
      gameList: Array(40).fill(1)
    }
  },
  methods: {
    generateClassName (index) {
      // 调用方法，动态生成index
      return `game_item-${index}`
    }
  }
}
</script>