当前位置：首页 > VUE

vue实现选电影

2026-02-19 19:34:55VUE

Vue 实现电影选择功能

创建 Vue 项目

使用 Vue CLI 创建一个新项目，安装必要依赖。确保项目结构清晰，便于后续开发。

vue create movie-selector
cd movie-selector
npm install axios vue-router

设计数据结构

定义电影数据模型，包含电影名称、类型、评分、海报等信息。使用数组存储电影列表，方便后续筛选和展示。

movies: [
  {
    id: 1,
    title: "肖申克的救赎",
    genre: "剧情",
    rating: 9.7,
    poster: "https://example.com/poster1.jpg"
  },
  {
    id: 2,
    title: "阿甘正传",
    genre: "剧情",
    rating: 9.5,
    poster: "https://example.com/poster2.jpg"
  }
]

实现电影列表展示

创建 MovieList 组件，使用 v-for 指令循环渲染电影卡片。每个卡片显示电影基本信息，并添加选择按钮。

<template>
  <div class="movie-list">
    <div v-for="movie in movies" :key="movie.id" class="movie-card">
      <img :src="movie.poster" :alt="movie.title">
      <h3>{{ movie.title }}</h3>
      <p>类型: {{ movie.genre }}</p>
      <p>评分: {{ movie.rating }}</p>
      <button @click="selectMovie(movie)">选择</button>
    </div>
  </div>
</template>

添加筛选功能

实现按类型、评分等条件筛选电影。使用计算属性动态过滤电影列表，保持响应式更新。

computed: {
  filteredMovies() {
    return this.movies.filter(movie => {
      return (
        movie.genre.includes(this.selectedGenre) &&
        movie.rating >= this.minRating
      )
    })
  }
}

实现选择逻辑

在选择电影时触发事件，更新选中状态或跳转到详情页。使用 Vue Router 管理页面导航。

methods: {
  selectMovie(movie) {
    this.$router.push({ name: 'MovieDetail', params: { id: movie.id } })
  }
}

添加电影详情页

创建 MovieDetail 组件展示选中电影的详细信息。从路由参数获取电影ID，匹配对应数据。

created() {
  const movieId = parseInt(this.$route.params.id)
  this.movie = this.movies.find(m => m.id === movieId)
}

样式优化

使用 CSS 或 UI 框架美化界面，确保响应式布局。添加过渡动画提升用户体验。

.movie-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.movie-card {
  transition: transform 0.3s;
}

.movie-card:hover {
  transform: scale(1.05);
}

数据持久化

考虑使用 Vuex 管理全局状态，或通过 API 获取真实电影数据。实现本地存储保存用户选择记录。

import axios from 'axios'

async fetchMovies() {
  try {
    const response = await axios.get('https://api.example.com/movies')
    this.movies = response.data
  } catch (error) {
    console.error('获取电影数据失败:', error)
  }
}