Vue.js 利用v-for中的index值实现隔行变色

当使用 v-for 对数组进行遍历时，Vue.js 提供了一个特殊的变量 $index，它可以得到当前元素的索引值，通过索引值来实现隔行变色是非常简单的。

在 Vue.js 模板中，通过 v-bind 或简写语法 :，我们可以将 class 绑定到元素上，并在 class 属性中使用三元运算符来判断当前元素是否需要添加隔行背景色。示例代码如下：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items"
          :key="item.id"
          :class="index % 2 === 0 ? 'even' : 'odd'">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style>
  .even { background-color: #f2f2f2; }
  .odd { background-color: #ffffff; }
</style>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Tom', age: 18 },
        { id: 2, name: 'Jerry', age: 20 },
        { id: 3, name: 'Alice', age: 22 },
        { id: 4, name: 'Bob', age: 24 },
      ]
    }
  }
}
</script>

在上面的示例中，我们使用 v-for 遍历 items 数组，并将 class 绑定到每个 <tr> 元素上。当 $index 为偶数时，添加 even 类，否则添加 odd 类，以达到隔行变色的效果。

另外，我们也可以通过计算属性来实现隔行变色。示例代码如下：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items"
          :key="item.id"
          :class="tableClasses[index]">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style>
  .even { background-color: #f2f2f2; }
  .odd { background-color: #ffffff; }
</style>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Tom', age: 18 },
        { id: 2, name: 'Jerry', age: 20 },
        { id: 3, name: 'Alice', age: 22 },
        { id: 4, name: 'Bob', age: 24 },
      ]
    }
  },
  computed: {
    tableClasses() {
      return this.items.map((item, index) => {
        return index % 2 === 0 ? 'even' : 'odd';
      });
    }
  }
}
</script>

在上面的示例中，我们通过计算属性 tableClasses 返回一个数组，数组中的每个元素表示对应 <tr> 元素需要添加的类名。计算属性基于 items 数组，当数组发生变化时，计算属性也会重新计算，以实现动态变色的效果。

综上所述，Vue.js 利用 v-for 中的 index 值实现隔行变色的方法有两种：使用三元运算符直接判断索引，或者通过计算属性计算添加类名的数组。