当前位置：首页 > VUE

vue视频列表实现

2026-02-19 03:48:45VUE

vue视频列表实现

数据准备

使用Vue的data属性定义视频列表数据，通常包含视频标题、封面、播放链接等信息。示例数据结构如下：

data() {
  return {
    videos: [
      { id: 1, title: '视频1', cover: 'url1.jpg', src: 'video1.mp4' },
      { id: 2, title: '视频2', cover: 'url2.jpg', src: 'video2.mp4' }
    ]
  }
}

列表渲染

通过v-for指令循环渲染视频列表，结合v-bind动态绑定数据。建议使用key属性提升渲染性能：

vue视频列表实现

<div v-for="video in videos" :key="video.id" class="video-item">
  <img :src="video.cover" :alt="video.title">
  <h3>{{ video.title }}</h3>
</div>

视频播放组件

集成第三方播放器或使用HTML5 video标签。推荐使用vue-video-player等专门库：

<video-player :src="currentVideo.src" v-if="showPlayer"></video-player>

交互功能

实现点击播放功能，通过事件绑定切换当前播放视频：

vue视频列表实现

methods: {
  playVideo(video) {
    this.currentVideo = video
    this.showPlayer = true
  }
}

样式优化

使用CSS Grid或Flex布局实现响应式列表，确保在不同设备上正常显示：

.video-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

性能优化

对于大量视频数据，建议实现懒加载或分页功能。可使用vue-lazyload等插件：

// main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

完整示例组件

<template>
  <div class="video-container">
    <div class="video-list">
      <div 
        v-for="video in videos" 
        :key="video.id"
        @click="playVideo(video)"
        class="video-item"
      >
        <img v-lazy="video.cover" :alt="video.title">
        <h3>{{ video.title }}</h3>
      </div>
    </div>

    <video-player 
      v-if="showPlayer"
      :src="currentVideo.src"
      @close="showPlayer = false"
    ></video-player>
  </div>
</template>