当前位置：首页 > VUE

vue实现筛选电影

2026-01-17 21:23:27VUE

使用Vue实现电影筛选功能

在Vue中实现电影筛选功能可以通过以下方法完成：

数据准备 创建包含电影信息的数组，每个电影对象包含标题、类型、评分等属性：

data() {
  return {
    movies: [
      { title: '电影A', genre: '动作', rating: 4.5 },
      { title: '电影B', genre: '喜剧', rating: 3.8 },
      { title: '电影C', genre: '科幻', rating: 4.2 }
    ],
    filters: {
      genre: '',
      minRating: 0
    }
  }
}

计算属性筛选 使用计算属性根据筛选条件过滤电影：

computed: {
  filteredMovies() {
    return this.movies.filter(movie => {
      const genreMatch = !this.filters.genre || 
                        movie.genre === this.filters.genre
      const ratingMatch = movie.rating >= this.filters.minRating
      return genreMatch && ratingMatch
    })
  }
}

模板渲染 在模板中显示筛选控件和结果：

vue实现筛选电影

<div>
  <select v-model="filters.genre">
    <option value="">所有类型</option>
    <option value="动作">动作</option>
    <option value="喜剧">喜剧</option>
  </select>

  <input type="number" v-model="filters.minRating" min="0" max="5" step="0.1">

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

进阶实现方案

使用Vuex管理状态 对于大型应用，可以使用Vuex集中管理电影数据和筛选条件：

// store.js
export default new Vuex.Store({
  state: {
    movies: [...],
    filters: {
      genre: '',
      minRating: 0
    }
  },
  getters: {
    filteredMovies: state => {
      return state.movies.filter(/* 筛选逻辑 */)
    }
  }
})

添加更多筛选条件 扩展筛选功能支持多条件查询：

vue实现筛选电影

filters: {
  genres: [],
  yearRange: [1990, 2020],
  keywords: ''
}

性能优化 对于大量数据，考虑使用虚拟滚动或分页加载：

<virtual-list :size="50" :remain="8">
  <div v-for="movie in filteredMovies" :key="movie.id">
    <!-- 电影项内容 -->
  </div>
</virtual-list>

样式与交互增强

添加过渡效果 使用Vue的过渡系统让筛选结果平滑变化：

<transition-group name="fade" tag="div">
  <div v-for="movie in filteredMovies" :key="movie.id">
    <!-- 内容 -->
  </div>
</transition-group>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

响应式设计 确保筛选界面在不同设备上表现良好：

.filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 768px) {
  .filter-container {
    flex-direction: column;
  }
}

以上实现方案可根据具体需求进行调整和扩展，核心思路是通过Vue的响应式系统和计算属性实现动态筛选功能。