vue实现视频类型筛选

实现视频类型筛选功能

在Vue中实现视频类型筛选功能，可以通过以下方法完成：

数据准备 定义视频数据和筛选选项数据

data() {
  return {
    videos: [
      { id: 1, title: '视频1', type: 'movie' },
      { id: 2, title: '视频2', type: 'tvshow' },
      { id: 3, title: '视频3', type: 'documentary' }
    ],
    filterOptions: [
      { value: 'all', label: '全部' },
      { value: 'movie', label: '电影' },
      { value: 'tvshow', label: '电视剧' },
      { value: 'documentary', label: '纪录片' }
    ],
    selectedType: 'all'
  }
}

筛选逻辑 使用计算属性实现筛选功能

computed: {
  filteredVideos() {
    if (this.selectedType === 'all') {
      return this.videos
    }
    return this.videos.filter(video => video.type === this.selectedType)
  }
}

模板部分 在模板中添加筛选控件和视频列表展示

<template>
  <div>
    <select v-model="selectedType">
      <option 
        v-for="option in filterOptions" 
        :value="option.value"
        :key="option.value"
      >
        {{ option.label }}
      </option>
    </select>

    <ul>
      <li v-for="video in filteredVideos" :key="video.id">
        {{ video.title }}
      </li>
    </ul>
  </div>
</template>

进阶实现方式

使用自定义筛选组件 创建可复用的筛选组件

Vue.component('video-filter', {
  props: ['options', 'value'],
  template: `
    <select @change="$emit('input', $event.target.value)" :value="value">
      <option v-for="option in options" :value="option.value">
        {{ option.label }}
      </option>
    </select>
  `
})

在父组件中使用

<video-filter 
  :options="filterOptions" 
  v-model="selectedType"
/>

响应式筛选优化

添加搜索功能 扩展筛选功能，支持多条件筛选

data() {
  return {
    searchQuery: '',
    // 其他数据...
  }
},
computed: {
  filteredVideos() {
    let result = this.videos
    if (this.selectedType !== 'all') {
      result = result.filter(video => video.type === this.selectedType)
    }
    if (this.searchQuery) {
      const query = this.searchQuery.toLowerCase()
      result = result.filter(video => 
        video.title.toLowerCase().includes(query)
      )
    }
    return result
  }
}

添加搜索框

<input 
  type="text" 
  v-model="searchQuery" 
  placeholder="搜索视频..."
/>

性能优化建议

对于大型视频列表，可以考虑使用虚拟滚动技术优化渲染性能。可以使用第三方库如vue-virtual-scroller。

添加防抖处理搜索输入，避免频繁触发筛选计算：

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(function(query) {
    this.searchQuery = query
  }, 300)
}

在模板中使用：

<input 
  type="text" 
  @input="handleSearch($event.target.value)" 
  placeholder="搜索视频..."
/>