vue 使用v-for 动态修改class

最新推荐文章于 2025-02-26 23:20:09 发布

原创最新推荐文章于 2025-02-26 23:20:09 发布 · 8.6k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Web前端

当前文章被收录于：

Web前端

104 篇文章 7 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

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

问题描述

通过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>