使用Vue2.x遍历数组并生成表格

阅读提示：本文共计约3048个文字，预计阅读时间需要大约8分钟，由作者少儿编程编辑整理创作于2023年11月06日19时37分31秒。

在 Vue 2.x 中，我们可以通过模板和计算属性来实现对数组的遍历，并将其转换为表格结构。以下是一个简单的示例，展示了如何实现这一功能。

我们需要创建一个 Vue 实例，并在其模板中定义一个表格结构。然后，我们可以在计算属性中遍历数组，并将结果渲染为表格行。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows">
        <td>{{ row[0] }}</td>
        <td>{{ row[1] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['Header 1', 'Header 2'],
      rows: [
        ['Row 1, Cell 1', 'Row 1, Cell 2'],
        ['Row 2, Cell 1', 'Row 2, Cell 2'],
      ],
    };
  },
};
</script>

在这个示例中，我们首先在 <thead> 部分定义了表头，然后在 <tbody> 部分通过 v-for 循环遍历 rows 数组，将其渲染为表格行。每个表格行包含两个单元格，分别对应于 rows 数组中的元素。

这样，我们就可以轻松地将数组转换为表格结构，并根据需要对其进行修改和扩展。

foreach遍历数组显示在表格