当前位置：首页 > VUE

vue实现视频列表数据

2026-02-22 21:16:21VUE

vue实现视频列表数据

使用Vue实现视频列表数据通常涉及数据获取、渲染和交互处理。以下是实现方法：

数据获取与存储 在Vue组件的data或setup中定义视频列表数据，可通过API请求获取数据：

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

使用v-for渲染列表 通过v-for指令循环渲染视频列表：

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

添加样式 为视频列表添加基本样式：

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

.video-item {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
}

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

处理交互 添加点击事件处理视频播放等交互：

<div v-for="video in videos" :key="video.id" @click="playVideo(video)">
  <!-- 视频内容 -->
</div>

methods: {
  playVideo(video) {
    console.log('播放视频:', video.title)
    // 实际播放逻辑
  }
}

异步加载数据 从API异步获取视频数据：

created() {
  fetch('/api/videos')
    .then(response => response.json())
    .then(data => {
      this.videos = data
    })
}

使用组件化 将视频项封装为单独组件：

<VideoItem 
  v-for="video in videos"
  :key="video.id"
  :video="video"
  @play="handlePlay"
/>

状态管理 对于大型应用，可使用Vuex或Pinia管理视频状态：

// 使用Pinia示例
import { defineStore } from 'pinia'

export const useVideoStore = defineStore('videos', {
  state: () => ({
    videos: []
  }),
  actions: {
    async fetchVideos() {
      const response = await fetch('/api/videos')
      this.videos = await response.json()
    }
  }
})

分页加载 实现分页加载更多视频：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    isLoading: false
  }
},
methods: {
  loadMore() {
    if (this.isLoading) return

    this.isLoading = true
    this.currentPage++

    fetch(`/api/videos?page=${this.currentPage}&size=${this.pageSize}`)
      .then(res => res.json())
      .then(newVideos => {
        this.videos = [...this.videos, ...newVideos]
        this.isLoading = false
      })
  }
}

vue实现视频列表数据