Question

如何为以下HTML表结构正确实现v-for标记？我有兴趣在文件中重复foreach文件。将v-for添加到“tr html标记：不会给我预期的结果

  <table border="1" align="right" width="200">
        <thead style="background-color: #87cefa;">
        <tr class="uppercase">
            <th> File Name</th>
            <th> Action</th>
        </tr>
        </thead>
        <tr>
            <td rowspan="2">File#1</td>
            <td>top right</td>
        </tr>
        <tr><td>bottom right</td>
        </tr>
    </table>

Answer 1

你可以这样试试

<table border="1" align="right" width="200">
    <thead style="background-color: #87cefa;">
        <tr class="uppercase">
            <th> File Name</th>
            <th> Action</th>
        </tr>
        </thead>
        <tbody v-for="(file,index) in 5">
        <tr >
            <td rowspan="2">File#{{index}}</td>
            <td>top right</td>
        </tr>
        <tr><td>bottom right</td>
        </tr>
    </tbody>
</table>

以下是jsFiddle

Vuejs v-for桌上有分裂细胞

1 个答案: