Vue.js渲染电影列表时如何实现每4项自动换行展示

方案1：纯CSS布局实现（最优，无需修改JS逻辑） #

你完全不需要拆分数组，直接给外层容器加CSS Grid布局就能实现一行固定4个、超出自动换行的效果，是目前成本最低的实现方式：

.MoviesContainer {
  display: grid;
  /* 一行固定放4个等宽的卡片 */
  grid-template-columns: repeat(4, 1fr);
  /* 卡片横向间距 */
  column-gap: 16px;
  /* 行间距 */
  row-gap: 24px;
}

如果更习惯用Flex布局也可以，写法如下：

.MoviesContainer {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 24px;
}
.Movies {
  /* 减去间距的影响，保证一行刚好放4个 */
  width: calc(25% - 12px);
  box-sizing: border-box;
}

方案2：计算属性自动分组（适合需要对每行做单独样式/逻辑处理的场景） #

如果你确实需要给每一行单独加容器、做特殊处理，也不用手动新建多个数组，写一个计算属性自动按4个一组拆分即可：

// 新增计算属性
computed: {
  groupedMovies() {
    const groupSize = 4
    const groups = []
    for (let i = 0; i < this.filteredMovies.length; i += groupSize) {
      groups.push(this.filteredMovies.slice(i, i + groupSize))
    }
    return groups
  }
}

对应模板调整为双层循环即可：

<div class="MoviesContainer">
  <div class="movieRow" v-for="(row, rowIdx) in groupedMovies" :key="rowIdx">
    <div class="Movies" v-for="(movie, idx) in row" :key="`${rowIdx}-${idx}`">
      <img class="image_img" :src="require('../assets/MoviesMap/' + movie.imgPath)">
      <div class="image_Overlay">
        <button @click="addedMovie">Add to Favorites</button>
        <p>Watch {{movie.MovieName}}</p>
      </div>
    </div>
  </div>
</div>

你附上的项目截图参考：

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