如何使用v-for按每日分组规则正确输出结构化天气卡片？

核心思路是先把原始天气数据按每8条一组拆分，再在模板中循环处理分组后的数据，就能轻松区分每组的第一条和剩余7条内容。

1. 预处理数据（添加计算属性） #

在Vue组件的computed选项中新增一个计算属性，将weatherList拆分为每8条一组的二维数组：

computed: {
  groupedWeather() {
    const groups = [];
    // 每8条数据划分一组
    for (let i = 0; i < this.weatherList.length; i += 8) {
      groups.push(this.weatherList.slice(i, i + 8));
    }
    return groups;
  }
}

2. 修改模板代码 #

不再直接循环原始的weatherList，改为循环分组后的groupedWeather，每组对应一张卡片：

<div class="container-fluid" v-else>
  <section class="vh-100" style="background-color: #C1CFEA;">
    <div class="container py-5 h-100">
      <div class="row d-flex justify-content-center align-items-center h-100" style="color: #282828;">
        <div class="col-md-9 col-lg-7 col-xl-5">
          <!-- 循环分组数据，每组对应一张卡片 -->
          <div class="card mb-4 gradient-custom" style="border-radius: 25px;" v-for="(group, groupIndex) in groupedWeather" :key="group[0].dt_txt">
            <div class="card-body p-4">
              <!-- 第一个区块：每组的第一条数据 -->
              <div id="demo1" class="carousel slide" data-ride="carousel">
                <ul class="carousel-indicators mb-0">
                  <li data-target="#demo1" data-slide-to="0" class="active"></li>
                  <li data-target="#demo1" data-slide-to="1"></li>
                  <li data-target="#demo1" data-slide-to="2"></li>
                </ul>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <div class="d-flex justify-content-between mb-4 pb-2">
                      <div>
                        <h2 class="display-2"><strong>{{ group[0].main.temp }}°C</strong></h2>
                        <p class="text-muted mb-0 ms-0">{{ cityName }}</p>
                      </div>
                      <div>
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-weather/ilu3.webp" width="20px" height="20px">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 第二个区块：每组的剩余7条数据 -->
              <div id="demo2" class="carousel slide" data-ride="carousel">
                <ul class="carousel-indicators mb-0">
                  <li data-target="#demo2" data-slide-to="0"></li>
                  <li data-target="#demo2" data-slide-to="1" class="active"></li>
                  <li data-target="#demo2" data-slide-to="2"></li>
                </ul>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <div class="d-flex justify-content-around text-center mb-4 pb-3 pt-2">
                      <div class="flex-column" v-for="(item, index) in group.slice(1)" :key="item.dt_txt">
                        <p class="small"><strong>{{ item.main.temp }}°C</strong></p>
                        <i class="fas fa-sun fa-2x mb-3" style="color: #ddd;"></i>
                        <p class="mb-0"><strong>{{ item.dt_txt }}</strong></p>
                        <p class="mb-0 text-muted" style="font-size: .65rem;">PM</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

原代码问题说明 #

你之前直接循环weatherList会生成40张卡片（而非需要的5张），内部嵌套的v-for又遍历整个原始数组，加上逻辑错误的v-if判断，导致数据重复展示、逻辑混乱。先分组再处理的方式，能让数据逻辑更清晰，也更易维护。

内容的提问来源于stack exchange，提问作者Владислав