当前位置：首页 > VUE

vue实现视频切换布局

2026-01-21 07:58:14VUE

实现视频切换布局的方法

在Vue中实现视频切换布局可以通过动态组件或条件渲染来控制不同视频的显示。以下是几种常见的方法：

动态组件切换

使用Vue的<component>动态组件结合v-bind:is实现视频切换：

vue实现视频切换布局

<template>
  <div>
    <button @click="currentVideo = 'video1'">视频1</button>
    <button @click="currentVideo = 'video2'">视频2</button>

    <component :is="currentVideo"></component>
  </div>
</template>

<script>
import Video1 from './Video1.vue'
import Video2 from './Video2.vue'

export default {
  components: { Video1, Video2 },
  data() {
    return {
      currentVideo: 'video1'
    }
  }
}
</script>

条件渲染实现切换

使用v-if和v-else指令控制视频显示：

vue实现视频切换布局

<template>
  <div>
    <button @click="showVideo1 = true">视频1</button>
    <button @click="showVideo1 = false">视频2</button>

    <Video1 v-if="showVideo1" />
    <Video2 v-else />
  </div>
</template>

<script>
import Video1 from './Video1.vue'
import Video2 from './Video2.vue'

export default {
  components: { Video1, Video2 },
  data() {
    return {
      showVideo1: true
    }
  }
}
</script>

使用路由切换视频

对于更复杂的应用，可以使用Vue Router实现视频页面切换：

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Video1 from './views/Video1.vue'
import Video2 from './views/Video2.vue'

const routes = [
  { path: '/video1', component: Video1 },
  { path: '/video2', component: Video2 }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

<!-- App.vue -->
<template>
  <div>
    <router-link to="/video1">视频1</router-link>
    <router-link to="/video2">视频2</router-link>

    <router-view></router-view>
  </div>
</template>

视频播放器组件实现

创建通用的视频播放器组件，通过props传递不同视频源：

<!-- VideoPlayer.vue -->
<template>
  <div>
    <video :src="src" controls width="600"></video>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true
    }
  }
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <button @click="currentSrc = 'video1.mp4'">视频1</button>
    <button @click="currentSrc = 'video2.mp4'">视频2</button>

    <VideoPlayer :src="currentSrc" />
  </div>
</template>

<script>
import VideoPlayer from './VideoPlayer.vue'

export default {
  components: { VideoPlayer },
  data() {
    return {
      currentSrc: 'video1.mp4'
    }
  }
}
</script>