Question

从数组中循环数据。问题是循环创建了3个空表，猜测它是因为im调用item。 3次。如果我想要数组中的数据而没有Vue创建空表，我应该如何显示数据？在没有v-for循环的情况下尝试使用{{users.firstname}}，但似乎无法正常工作。

\"

使用<table v-for="item in users"> <tbody> <tr> <td>{{ item.username }}</td> </tr> <tr> <td>{{ item.firstname }}</td> </tr> <tr> <td>{{ item.lastname }}</td> </tr> </tbody> </table>解决。没有打印出额外的元素。

Answer 1

如果您想为每个用户创建3行，请使用<template>标记对其进行分组，并在该模板上使用v-for：

  <table>
    <tbody>
      <template v-for="item in users">
        <tr>
          <td>{{ item.username }}</td>
        </tr>
        <tr>
          <td>{{ item.firstname }}</td>
        </tr>
        <tr>
          <td>{{ item.lastname }}</td>
        </tr>
     </template>
   </tbody>
  </table>

看看这个小提琴的例子：https://jsfiddle.net/nfa43bhq/

使用v-for与VueJS显示数据

1 个答案: