如何在Vue的v-for循环中实现可变数量的内容块？

当然可以实现！在Vue的v-for循环里渲染可变数量的内容块完全没问题，嵌套循环是很直观的实现方式，但也不是唯一的选择——不过对于你的场景来说，嵌套循环应该是最清晰、最易维护的方案。

核心思路：调整数据结构+嵌套v-for #

最合理的做法是先调整你的数据源，把原来单个的content字符串改成字符串数组，这样每个年份就能对应任意数量的内容段落。然后通过嵌套的v-for循环，外层遍历年份，内层遍历该年份下的所有段落，自动渲染对应数量的<p>标签。

修改后的代码示例

HTML部分

<div id='timeline' class="timeline container">
  <div class="timeline__main">
    <div class="timeline__main--inner" v-for="year in timelines" :key="year.id" ref="timelines" >
      <div class="timeline-title">
        <h3 class="title-3">{{ year.year }}</h3>
      </div>
      <div class="timeline-content">
        <!-- 内层v-for渲染对应数量的段落 -->
        <p class="history-description" v-for="(paragraph, index) in year.content" :key="index">
          {{ paragraph }}
        </p>
      </div>
    </div>
  </div>
</div>

JavaScript部分

const Timeline = {
  data() {
    return {
      timelines: [
        { 
          id: 2020, 
          year: '2020', 
          content: [
            `Lorem Ipsum is simply dummy text of the printing and typesetting industry.`,
            `Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.`,
            `When an unknown printer took a galley of type and scrambled it to make a type specimen book.`
          ]
        },
        { 
          id: 2019, 
          year: '2019', 
          content: [
            `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`
          ]
        },
      ],
    };
  },
};
Vue.createApp(Timeline).mount("#timeline");

这样修改后，2020年的数组有3个元素，就会渲染3个带history-description类的<p>标签；2019年的数组只有1个元素，就只会渲染1个段落，完全满足你的需求。

备选方案：不修改数据结构，通过字符串分割实现 #

如果你因为某些原因无法修改原始数据结构，比如content是用特定分隔符（比如换行、分号）拼接的单个字符串，也可以在模板中直接分割字符串来生成多个段落：

<p class="history-description" 
   v-for="(paragraph, index) in year.content.split('\n').filter(p => p.trim())" 
   :key="index">
  {{ paragraph }}
</p>

这里用split('\n')把字符串按换行分割成数组，再用filter(p => p.trim())过滤掉空字符串，避免出现空的<p>标签。不过这种方式的可读性和维护性不如调整数据结构的方案，只建议在无法修改数据源的情况下使用。

结论 #

你不需要必须使用嵌套循环，但它是这个场景下最合理的选择。只要让每个循环实例对应的内容是一个可遍历的集合（数组或分割后的字符串数组），就能轻松实现可变数量的内容块渲染。

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