Vue 2 v-用于多个项目

hxzsmxv2 于 2022-11-25 发布在 Vue.js

关注(0)|答案(2)|浏览(179)

当尝试使用v-for将行填充到表中时，很容易将v-for元素1：1Map为如下行：

<template>
  <table>
    <tr v-for="item in items"><td>{{item}}</td></tr>
  </table>
</template>

我的问题是：如何为每个项目创建多行（例如td元素）（请参见以下伪代码）：

<template>
  <table>
    <nothing v-for="item in items">
      <tr><td>{{item.line1}}</td></tr>
      <tr><td>{{item.line2}}</td></tr>
    </nothing>
  </table>
</template>

这里，<nothing>不应该在DOM中作为一个级别发出，只应该在<table>的正下方发出<td>。
这可能吗？

vue.js

来源：https://stackoverflow.com/questions/74490803/vue-2-v-for-with-multiple-items

2条答案

按热度按时间

hrysbysz1#

在Vue.js中，可以使用标记<template>，它的作用与nothing完全相同。

<table id="t1">
    <template v-for="item in items">
        <tr><td>{{item.line1}}</td></tr>
        <tr><td>{{item.line2}}</td></tr>
    </template>
</table>

但是，您也可以将这两行封装到tbody标记中，以实际呈现它，并将这两行分为两组，例如，用于样式设置。

赞(0）回复(0）举报 2022-11-25

vjrehmav2#

除了Dmitry的解决方案之外，通常情况下，您还需要循环行，并在同一个td中使用块。

<table>
      <tr v-for="item in items">
        <td>
          {{item.line1}} <br />
          {{item.line2}}
        </td>
      </tr>
  </table>

或

<table>
      <tr v-for="item in items">
        <td>
          <div>{{item.line1}}</div>
          <div>{{item.line2}}</div>
        </td>
      </tr>
  </table>

赞(0）回复(0）举报 2022-11-25

我来回答

Vue 2 v-用于多个项目

2条答案

相关问题

热门标签

最新问答