vuejs 的特殊循环答案

【问题标题】：Special loop for vuejsvuejs 的特殊循环
【发布时间】：2021-07-05 10:57:52
【问题描述】：

我在刀片中有这个代码：


<tbody>
    @for ($i = 1; $i <= n; $i++)
        <tr data-nr="{{ $i }}" data-group="1">
            <td rowspan="2">{{ $i }}</td>
            <td></td>
        </tr>
        <tr data-nr="{{ $i }}" data-group="2">
            <td></td>
        </tr>

    @endfor

</tbody>

在 html 中的输出是：

<tr data-number="1" data-group="1"></tr>
    <td rowspan="2"><td>
<tr data-number="1" data-group="2"></tr>
    <td></td>
<tr data-number="2" data-group="1"></tr>
    <td rowspan="2"><td>
<tr data-number="2" data-group="2"></tr>
    <td></td>
etc

如何使用 vuejs 获得这个 html 结果。大概我可以使用原生 js 吗？

<tbody>
    <tr v-for="lesson, index in lessonsMax"></tr>
</tbody>

这种格式只是重新输入 tr，但我需要在 1 个循环迭代中使用两个 tr 元素

【问题讨论】：

嗨，欢迎来到stackoverflow！ :) 你能把你的问题格式化好一点吗？
对不起。我怎样才能得到这个使用 vuejs 的 html 结果？
不，我的意思是实际问题，提供更好的缩进，也许是一些关于你想要达到的目标的视觉效果。 How to Ask
你为什么想要那个输出？它甚至无效。
我需要一张有课的桌子。一堂课 = 一堂课。本课有两组，第一课为 1 课，1 组。第二课 1 课，2 组

标签： html laravel loops vue.js

【解决方案1】：

您想要实现的目标可以使用 v-for 实现，如下所示：

<tbody v-for="i in n"> // i is index and n should be passed from vue data
        <tr data-nr="@{{ i }}" data-group="1">
            <td rowspan="2">@{{ i }}</td>
            <td></td>
        </tr>
        <tr data-nr="@{{ i }}" data-group="2">
            <td></td>
        </tr>
</tbody>

vue 文档：https://vuejs.org/v2/guide/list.html#v-for-with-a-Range

注意：您可能认为多个<tbody> 无效。但实际上，它是有效的！根据 <table> 的 mozilla 文档，“您可以使用多个 <tbody> 元素在表中创建多个部分。每个部分都可能有自己的标题行；但是，每个表只能有一个 <thead>！” .在此处查看 mozilla 文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody#multiple_bodies

【讨论】：

如果你想要索引，你需要做v-for="(element, index) in n"，否则它只会把元素命名为i（在你的例子中）。
如果他传递一个从 1 开始的自然数 n，那么对于他的情况，索引和值将是相同的，对吧？
即使是这样，我也不会说这是一个很好的做法，因为它适合使用变量。
这个代码结果视觉效果很好。但是 tbody 只是重复了 n 次。它无效不是吗？
@Alex 实际上，它是有效的！根据的 mozilla 文档，“您可以通过使用多个元素在表中创建多个部分。每个部分都可能有自己的标题行或行；但是，每个表只能有一个！” .请参阅此处以供参考：developer.mozilla.org/en-US/docs/Web/HTML/Element/…