Question

vue的新功能

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

我想将数据装入每个td \ div

如果可以简化输入的数据格式，我可以对其进行更改，但可以在诸如此类的地方进行规划

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

甚至还在考虑在box1上添加row：1，col：1，在box 2上添加row：1，col2 ...在box 25上添加row：5，col：5

不确定如何设置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 }的数组中存储），则可以使用计算属性来生成包含相关单元格的完整表格模型填充必要的数据后，模板将与上面显示的基本相同。您不应在模板中进行数据操作，而应在计算属性中的代码中进行操作。

将数据挂载到许多div或表

1 个答案: