用vue写表格隔行换色

在 Vue 中，可以使用 `v-for` 指令来循环渲染数据，同时可以使用 `v-bind:class` 指令来动态绑定类名。因此，可以利用 Vue 的这些特性来实现表格隔行换色的效果。下面是一个简单的示例：

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in list" :key="index" :class="{ 'odd-row': index % 2 === 1 }">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' },
        { name: '赵六', age: 24, gender: '女' },
      ]
    };
  }
}
</script>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

.odd-row {
  background-color: #f9f9f9;
}
</style>

在上面的示例中，我们使用了 `v-for` 指令来循环渲染列表数据，并使用 `:key` 属性来指定每个子元素的唯一标识。在 `<tr>` 标签中，我们使用 `:class` 指令来动态绑定类名，判断当前行的索引是否为奇数，如果是，则添加 `odd-row` 类名，从而实现隔行换色的效果。最后，在样式中定义了 `odd-row` 类名的背景色为浅灰色。