Question

我有一个表，其中每个“逻辑”行都包含两个“标记行”。

<table class="table table-bordered">
    <tbody>
        <template v-for="(note, index) in notes">
            <tr>
                <td>
                    {{ moment(note.noteTime).format('YYYY-MM-DD HH:mm') }}
                </td>
                <td>
                    {{ note.locationName }}
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    {{ note.noteText }}
                </td>
            </tr>
        </template>
    </tbody>
</table>

有没有一种方法可以在不影响html语法的情况下在vue中生成这种表（模板元素在tbody中无效）？

Answer 1

<template>不会生成html元素，因此不会干扰html语法。实际上，VueJS文档中有一个类似的示例：

https://vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

这里是一个jsFiddle，可以从实际的文档中查看示例。您可以检查HTML语法：

https://jsfiddle.net/50wL7mdz/545901/

v-用于呈现具有多个tr的html表

1 个答案: