当前位置：首页 > VUE

vue视频列表实现

2026-01-18 11:21:55VUE

Vue 视频列表实现

数据准备

定义一个数组存储视频信息，每个视频对象包含标题、封面图、播放地址等属性。

data() {
  return {
    videos: [
      {
        id: 1,
        title: '视频1',
        cover: 'https://example.com/cover1.jpg',
        url: 'https://example.com/video1.mp4'
      },
      {
        id: 2,
        title: '视频2', 
        cover: 'https://example.com/cover2.jpg',
        url: 'https://example.com/video2.mp4'
      }
    ]
  }
}

列表渲染

使用v-for指令循环渲染视频列表，绑定点击事件处理视频播放。

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

视频播放组件

添加视频播放器组件，控制视频的播放状态。

<video 
  ref="videoPlayer" 
  controls
  :src="currentVideo.url"
  v-if="currentVideo"
></video>

方法实现

定义播放视频的方法，设置当前播放视频并控制播放器。

methods: {
  playVideo(video) {
    this.currentVideo = video
    this.$nextTick(() => {
      this.$refs.videoPlayer.play()
    })
  }
}

样式设计

为视频列表和播放器添加基本样式。

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

.video-item {
  cursor: pointer;
}

.video-item img {
  width: 100%;
  height: auto;
}

完整组件示例

将上述代码整合为完整组件。

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

    <video 
      ref="videoPlayer" 
      controls
      :src="currentVideo.url"
      v-if="currentVideo"
    ></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videos: [...],
      currentVideo: null
    }
  },
  methods: {
    playVideo(video) {
      this.currentVideo = video
      this.$nextTick(() => {
        this.$refs.videoPlayer.play()
      })
    }
  }
}
</script>

<style>
/* 样式代码 */
</style>

vue视频列表实现