如何在Vue.js中实现类似Laravel Blade的单次循环生成两个<tr>元素的特殊循环

我明白你现在的需求——之前用Laravel Blade的@for循环每次能输出一对<tr>，但Vue的v-for默认一次循环只能渲染一个元素，想要实现同样的一对<tr>输出其实很简单，有两种常用方法：

方法一：用Vue的<template>标签作为循环容器 #

Vue提供了<template>标签，它不会被渲染成实际的DOM节点，只是用来包裹需要循环的多个元素，完美解决单次循环生成多个元素的问题。你可以这么写：

<tbody>
  <!-- 用template包裹两个tr，v-for写在template上 -->
  <template v-for="(_, index) in lessonsMax" :key="index">
    <!-- 第一个tr，对应原来的data-group="1" -->
    <tr :data-nr="index + 1" data-group="1">
      <td rowspan="2">{{ index + 1 }}</td>
      <td></td>
    </tr>
    <!-- 第二个tr，对应原来的data-group="2" -->
    <tr :data-nr="index + 1" data-group="2">
      <td></td>
    </tr>
  </template>
</tbody>

这里需要注意两个点：

• index是从0开始的，所以data-nr和显示的序号要写成index + 1，对应你原来Blade里的$i从1开始的逻辑
• 一定要给v-for绑定:key属性，这是Vue的要求，用来跟踪每个元素的身份，避免渲染错误

方法二：用原生JavaScript手动生成DOM元素 #

如果你不想用Vue的模板语法，或者在某些非Vue管理的DOM场景下，原生JS也能轻松实现：

// 先获取目标tbody元素
const targetTbody = document.querySelector('tbody');
// 假设lessonsMax是你需要循环的次数，比如原来的n
const loopCount = lessonsMax;

for (let i = 1; i <= loopCount; i++) {
  // 创建第一个tr及其子元素
  const trGroup1 = document.createElement('tr');
  trGroup1.dataset.nr = i;
  trGroup1.dataset.group = '1';
  
  const numTd = document.createElement('td');
  numTd.rowSpan = 2;
  numTd.textContent = i;
  const emptyTd1 = document.createElement('td');
  
  trGroup1.appendChild(numTd);
  trGroup1.appendChild(emptyTd1);
  
  // 创建第二个tr及其子元素
  const trGroup2 = document.createElement('tr');
  trGroup2.dataset.nr = i;
  trGroup2.dataset.group = '2';
  
  const emptyTd2 = document.createElement('td');
  trGroup2.appendChild(emptyTd2);
  
  // 把两个tr添加到tbody里
  targetTbody.appendChild(trGroup1);
  targetTbody.appendChild(trGroup2);
}

这种方法就是直接操作DOM，循环一次创建两个<tr>元素，设置好对应的data-*属性和<td>内容，最后追加到tbody中，和你原来Blade输出的HTML结构完全一致。

两种方法各有适用场景：如果你的页面是Vue管理的响应式页面，优先用第一种<template>的方法，它能配合Vue的响应式数据自动更新DOM；如果是静态页面或者不需要响应式的场景，原生JS的方法也很灵活。

内容的提问来源于stack exchange，提问作者Alex Nicholaev