如何在Vue.js中条件性开闭标签？Bootstrap视频分组需求

嘿，我明白你遇到的困扰了——想用Vue实现每3个视频套一个Bootstrap的row标签，但直接用条件渲染尝试控制标签开闭时，反而把包含视频的子标签给隐藏了。其实核心问题在于Vue的模板逻辑是数据驱动的，不能像原生JS那样手动去“开闭”单个标签，我们得换个思路：先把视频数据分组，再基于分组后的数据来渲染模板就完美解决了！

具体实现步骤 #

1. 对视频数据进行分组（计算属性处理） #

首先，我们需要把你的视频数组转换成每3个元素为一组的二维数组。这一步可以用Vue的计算属性来完成，自动响应数据变化：

<script setup>
import { ref, computed } from 'vue'

// 假设你的视频数据是这个数组
const videos = ref([
  { id: 1, url: 'video1.mp4', title: '视频1' },
  { id: 2, url: 'video2.mp4', title: '视频2' },
  { id: 3, url: 'video3.mp4', title: '视频3' },
  { id: 4, url: 'video4.mp4', title: '视频4' },
  { id: 5, url: 'video5.mp4', title: '视频5' },
])

// 计算属性：将视频数组按每3个一组拆分
const groupedVideos = computed(() => {
  const groups = []
  // 遍历原数组，每3个元素分一组
  for (let i = 0; i < videos.value.length; i += 3) {
    groups.push(videos.value.slice(i, i + 3))
  }
  return groups
})
</script>

2. 基于分组数据渲染模板 #

接下来在模板里，先循环分组后的数组，每个组对应一个Bootstrap的row；然后在每个row里面循环该组的视频，用col标签包裹每个视频：

<template>
  <div class="container">
    <!-- 循环每组视频，生成一个row -->
    <div class="row g-3" v-for="(videoGroup, index) in groupedVideos" :key="index">
      <!-- 循环组内的每个视频，生成col -->
      <div class="col-md-4" v-for="video in videoGroup" :key="video.id">
        <div class="card h-100">
          <video controls class="card-img-top">
            <source :src="video.url" type="video/mp4">
            你的浏览器不支持视频播放
          </video>
          <div class="card-body">
            <h5 class="card-title">{{ video.title }}</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

为什么这个方案可行？ #

Vue的模板是基于数据结构生成的，我们不需要手动控制row标签的“开”和“闭”——每个row直接对应一组3个视频的数据，当数据分组完成后，模板会自动为每个组生成完整的row包裹结构，完美契合Bootstrap的布局逻辑，也不会出现子标签被隐藏的问题。

内容的提问来源于stack exchange，提问作者ben.IT