vue 将数据挂载到多个 div 或 table

Question

vue 新手

尝试创建一个简单的表格或多个 div（5 行 x 5 列）

我想将数据挂载到每个 td\div

如果它更容易，我可以更改传入的数据格式，但计划类似的东西

[{ box:1,
  name: 'a'
},
{ box:2,
  name: 'b'
},
{ box:3,
  name: 'c'
},
...
{ box:25,
  name: 'z'
}]

甚至考虑添加 row:1, col: 1 for box1, row:1, col2 for box 2 ... row:5, col:5 for box 25

不确定如何设置 html 和 vue。我需要做一个循环来在html中创建表格，还是可以在vue模板中完成？

谢谢

Answer 1

使用v-for 循环遍历数组中的每一项并生成表格的行。

<table>
  <thead>
    <tr>
      <th>Box</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="row of rows">
      <td>{{ row.box }}</td>
      <td>{{ row.name }}</td>
    </tr>
  </tbody>
</table>

data: {
  rows: [
    { box: 1, name: 'a' },
    { box: 2, name: 'b' },
    { box: 3, name: 'c' }
  ]
}

您说要生成一个 5x5 的表格；您的数据是否稀疏（只有一些单元格包含数据，其他单元格可能为空）？请提供更多信息，说明您希望生成的表格是什么样子以及如何存储数据。

通常，您的数据模型应该反映您希望表格的外观；模板只是“纯函数”，无需太多操作即可从数据生成视图。您的数据应该是一个“5x5 表格”，您可以在模板中循环生成 HTML。

如果您以稀疏的方式存储关联数据（例如每个项目都有一个单元格位置{ row: 1, col: 2 } 的数组，那么您可以使用计算属性来生成填充了相关单元格的完整表格模型有了必要的数据，那么模板将与我上面显示的基本相同。您不应该在模板中进行数据操作，而是在计算属性的代码中进行。