vue实现视频序号

Vue 实现视频序号的方法

在 Vue 中实现视频序号功能，可以通过动态绑定数据和循环渲染来实现。以下是几种常见的实现方式：

使用 v-for 循环渲染序号

<template>
  <div>
    <div v-for="(video, index) in videos" :key="video.id">
      <span>视频 {{ index + 1 }}: {{ video.title }}</span>
      <video :src="video.url" controls></video>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videos: [
        { id: 1, title: '视频1', url: 'video1.mp4' },
        { id: 2, title: '视频2', url: 'video2.mp4' },
        { id: 3, title: '视频3', url: 'video3.mp4' }
      ]
    }
  }
}
</script>

自定义序号格式

如果需要更复杂的序号格式（如 01、02 等），可以使用计算属性或方法处理：

<template>
  <div>
    <div v-for="(video, index) in videos" :key="video.id">
      <span>视频 {{ formatIndex(index) }}: {{ video.title }}</span>
      <video :src="video.url" controls></video>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videos: [
        { id: 1, title: '视频1', url: 'video1.mp4' },
        { id: 2, title: '视频2', url: 'video2.mp4' },
        { id: 3, title: '视频3', url: 'video3.mp4' }
      ]
    }
  },
  methods: {
    formatIndex(index) {
      return (index + 1).toString().padStart(2, '0')
    }
  }
}
</script>

动态加载视频数据

如果视频数据是异步加载的，可以在 mounted 或 created 钩子中获取数据：

<template>
  <div>
    <div v-for="(video, index) in videos" :key="video.id">
      <span>视频 {{ index + 1 }}: {{ video.title }}</span>
      <video :src="video.url" controls></video>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videos: []
    }
  },
  async mounted() {
    const response = await fetch('https://api.example.com/videos')
    this.videos = await response.json()
  }
}
</script>

添加分页功能

如果需要分页显示视频序号，可以结合分页组件实现：

<template>
  <div>
    <div v-for="(video, index) in paginatedVideos" :key="video.id">
      <span>视频 {{ (currentPage - 1) * pageSize + index + 1 }}: {{ video.title }}</span>
      <video :src="video.url" controls></video>
    </div>
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videos: [
        { id: 1, title: '视频1', url: 'video1.mp4' },
        { id: 2, title: '视频2', url: 'video2.mp4' },
        // 更多视频数据...
      ],
      currentPage: 1,
      pageSize: 5
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.videos.length / this.pageSize)
    },
    paginatedVideos() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.videos.slice(start, end)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++
    }
  }
}
</script>

以上方法可以根据实际需求灵活调整，适用于大多数 Vue 项目中的视频序号展示场景。