当前位置：首页 > VUE

vue实现筛选电影

2026-03-10 03:08:27VUE

实现电影筛选功能

在Vue中实现电影筛选功能可以通过计算属性或方法对电影列表进行过滤。以下是一个完整的实现示例：

基础数据结构

假设电影数据存储在movies数组中，每个电影对象包含title,genre,year等属性：

data() {
  return {
    movies: [
      { id: 1, title: '肖申克的救赎', genre: '剧情', year: 1994, rating: 9.7 },
      { id: 2, title: '教父', genre: '犯罪', year: 1972, rating: 9.2 },
      // 更多电影数据...
    ],
    filters: {
      genre: '',
      year: '',
      minRating: 0
    }
  }
}

计算属性实现筛选

使用计算属性创建过滤后的电影列表：

computed: {
  filteredMovies() {
    return this.movies.filter(movie => {
      return (
        (this.filters.genre === '' || movie.genre === this.filters.genre) &&
        (this.filters.year === '' || movie.year.toString() === this.filters.year) &&
        (movie.rating >= this.filters.minRating)
      )
    })
  }
}

模板中的筛选控件

在模板中添加筛选表单：

<div class="filters">
  <select v-model="filters.genre">
    <option value="">所有类型</option>
    <option v-for="genre in uniqueGenres" :value="genre">{{ genre }}</option>
  </select>

  <select v-model="filters.year">
    <option value="">所有年份</option>
    <option v-for="year in uniqueYears" :value="year">{{ year }}</option>
  </select>

  <input type="range" v-model="filters.minRating" min="0" max="10" step="0.1">
  <span>最低评分: {{ filters.minRating }}</span>
</div>

<ul>
  <li v-for="movie in filteredMovies" :key="movie.id">
    {{ movie.title }} ({{ movie.year }}) - {{ movie.genre }} - 评分: {{ movie.rating }}
  </li>
</ul>

获取唯一值辅助计算属性

添加辅助计算属性获取唯一的类型和年份：

computed: {
  uniqueGenres() {
    return [...new Set(this.movies.map(movie => movie.genre))]
  },
  uniqueYears() {
    return [...new Set(this.movies.map(movie => movie.year))].sort((a, b) => b - a)
  }
}

高级筛选功能

对于更复杂的筛选需求，可以添加搜索框和排序功能：

data() {
  return {
    searchQuery: '',
    sortField: 'rating',
    sortDirection: 'desc'
  }
},
computed: {
  filteredMovies() {
    let result = this.movies
    if (this.searchQuery) {
      const query = this.searchQuery.toLowerCase()
      result = result.filter(movie => 
        movie.title.toLowerCase().includes(query) ||
        movie.genre.toLowerCase().includes(query)
      )
    }
    // 其他筛选条件...

    // 排序
    return result.sort((a, b) => {
      const modifier = this.sortDirection === 'asc' ? 1 : -1
      return a[this.sortField] > b[this.sortField] ? modifier : -modifier
    })
  }
}