当前位置：首页 > VUE

vue实现筛选电影

2026-02-18 13:51:39VUE

实现筛选电影功能

在Vue中实现电影筛选功能，可以通过计算属性、v-model指令和条件渲染来实现。以下是一个完整的实现方案：

数据准备

在Vue组件中定义电影数据和筛选条件：

data() {
  return {
    movies: [
      { id: 1, title: '肖申克的救赎', genre: '剧情', year: 1994, rating: 9.7 },
      { id: 2, title: '阿甘正传', genre: '剧情', year: 1994, rating: 9.5 },
      { id: 3, title: '星际穿越', genre: '科幻', year: 2014, rating: 9.3 }
    ],
    filters: {
      genre: '',
      year: '',
      minRating: 0
    }
  }
}

筛选逻辑实现

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

computed: {
  filteredMovies() {
    return this.movies.filter(movie => {
      const genreMatch = !this.filters.genre || 
                         movie.genre.includes(this.filters.genre)
      const yearMatch = !this.filters.year || 
                        movie.year.toString() === this.filters.year
      const ratingMatch = movie.rating >= this.filters.minRating

      return genreMatch && yearMatch && ratingMatch
    })
  },
  availableGenres() {
    return [...new Set(this.movies.map(movie => movie.genre))]
  },
  availableYears() {
    return [...new Set(this.movies.map(movie => movie.year))]
  }
}

模板实现

在模板中添加筛选控件和电影列表：

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

  <select v-model="filters.year">
    <option value="">所有年份</option>
    <option v-for="year in availableYears" :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 class="movie-list">
  <li v-for="movie in filteredMovies" :key="movie.id">
    <h3>{{ movie.title }}</h3>
    <p>类型: {{ movie.genre }}</p>
    <p>年份: {{ movie.year }}</p>
    <p>评分: {{ movie.rating }}</p>
  </li>
</ul>

样式优化

添加基本CSS样式提升用户体验：

.filters {
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 5px;
}

.filters select, .filters input {
  margin-right: 15px;
  padding: 5px;
}

.movie-list {
  list-style: none;
  padding: 0;
}

.movie-list li {
  padding: 15px;
  margin-bottom: 10px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

高级筛选功能

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

data() {
  return {
    // 原有数据...
    searchQuery: '',
    sortBy: 'rating',
    sortOrder: 'desc'
  }
},
computed: {
  // 修改后的筛选逻辑
  filteredMovies() {
    let result = this.movies.filter(movie => {
      const matchesSearch = !this.searchQuery || 
                           movie.title.toLowerCase().includes(this.searchQuery.toLowerCase())
      // 原有筛选条件...
      return matchesSearch && genreMatch && yearMatch && ratingMatch
    })

    // 排序逻辑
    return result.sort((a, b) => {
      const order = this.sortOrder === 'asc' ? 1 : -1
      return a[this.sortBy] > b[this.sortBy] ? order : -order
    })
  }
}

在模板中添加相应控件：

<input type="text" v-model="searchQuery" placeholder="搜索电影...">

<select v-model="sortBy">
  <option value="rating">按评分</option>
  <option value="year">按年份</option>
  <option value="title">按名称</option>
</select>

<select v-model="sortOrder">
  <option value="desc">降序</option>
  <option value="asc">升序</option>
</select>

这种实现方式提供了灵活的电影筛选功能，用户可以根据类型、年份、评分等多个维度进行筛选，同时还支持搜索和排序功能。

vue实现筛选电影