Vue的v-for循环中如何动态设置className？解决绑定index无效问题

首先说明你原有写法不生效的原因：Vue的:class绑定若直接传入数字类型的index会被自动忽略，因为CSS类名要求是字符串格式。你只需把索引转成字符串，原有写法就能正常工作：

<li v-for="(msg, index) in system_message" :class="index.toString()">
  <!-- 内容 -->
</li>

或者用模板字符串更直观：

<li v-for="(msg, index) in system_message" :class="`${index}`">
  <!-- 内容 -->
</li>

如果一定要用setAttribute实现，步骤如下：

1. 给循环的li绑定ref，v-for中的ref会生成一个数组：

<li v-for="(msg, index) in system_message" ref="messageItems">
  <!-- 内容 -->
</li>

2. 在组件的mounted钩子（若system_message会动态更新，还需在updated钩子中同步处理）里遍历ref数组，给每个元素设置类名：

mounted() {
  this.$refs.messageItems.forEach((item, index) => {
    item.setAttribute('class', index.toString())
  })
},
updated() {
  // 数据动态更新时同步更新类名
  this.$refs.messageItems.forEach((item, index) => {
    item.setAttribute('class', index.toString())
  })
}

注意：setAttribute设置class会覆盖元素原有类名，若需保留其他类，改用classList.add()：

item.classList.add(index.toString())

内容的提问来源于stack exchange，提问作者theWorstCoderInTheWorld