vue 将数据挂载到许多 div 或表中

Question

vue 的新功能

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

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

如果它更容易，我可以更改数据格式，但计划这样的事情

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

甚至想为框 1 添加行：1、列：1 框 1、行：1、框 2 的列 2 ...行：5， 列：5 为框 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 }的数组，那么您可以使用计算属性生成全表模型，其中相关单元格填充了必要的数据，那么模板将与我上面显示的大致相同。不应在模板中进行数据操作，而应在计算属性的代码中进行。