面试题：Vue构建动态表格之模板语法基础

Question

在Vue中使用模板语法构建动态表格，假设表格数据存储在一个数组中，每个数组元素是一个对象，包含'id'、'name'和'age'三个属性。请编写一个Vue模板代码片段来展示这个动态表格，表头分别为'ID'、'姓名'和'年龄'，并使用v - for指令遍历数据渲染表格行。同时，为表格添加斑马线效果（隔行不同背景色）。

Answer 1

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="item.id" :class="{ 'bg-gray-100': index % 2 === 1 }">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 30 }
      ]
    };
  }
};
</script>

<style scoped>
.bg-gray-100 {
  background-color: #f3f4f6;
}
</style>