vue 使用v-for 动态修改class

问题描述

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