javascript - 我可以在 Vue.js 中的 内使用 标签吗？

Question

我有下面的代码，在 vue.js 中创建一个动态表。

<template>
    <tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
        <td>{{item.items}}</td>
    </tr>
    <tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
        <td>{{item.items}}(future)</td>
    </tr>
    <tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
        <td>GAP</td>
    </tr>
</template>

但是这个的输出并不是我所期望的。结果是这样的:

如何才能达到预期的输出？因为如果我尝试将它们包裹在一个<tr>中标签如:

<tr>
    <tr>
        <td>
        </td>
    </tr>

    <tr>
        <td>
        </td>
    </tr>
</tr>

它说:

Parsing error: x-invalid-end-tag

Answer 1

您可以使用 tbody(或仅使用 template 标签)包装 tr，并仅使用一个 v-for:

 <tbody v-for="(item,index) in itemList" :key="index">
    <tr class="left-align">
        <td>{{item.items}}</td>
    </tr>
    <tr class="left-align">
        <td>{{item.items}}(future)</td>
    </tr>
    <tr class="left-align">
        <td>GAP</td>
    </tr>
 </tbody>