vue实现电影选择

Vue实现电影选择功能

使用Vue实现电影选择功能可以通过组件化开发、状态管理和API交互来完成。以下是具体实现方法：

创建电影列表组件

创建一个电影列表组件用于展示可选择的电影：

<template>
  <div class="movie-list">
    <div 
      v-for="movie in movies" 
      :key="movie.id"
      @click="selectMovie(movie)"
      :class="{ 'selected': selectedMovie && selectedMovie.id === movie.id }"
    >
      <img :src="movie.poster" :alt="movie.title">
      <h3>{{ movie.title }}</h3>
      <p>{{ movie.year }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    movies: Array,
    selectedMovie: Object
  },
  methods: {
    selectMovie(movie) {
      this.$emit('movie-selected', movie)
    }
  }
}
</script>

实现电影详情展示

创建电影详情组件显示选中电影的详细信息：

<template>
  <div class="movie-details" v-if="movie">
    <h2>{{ movie.title }}</h2>
    <img :src="movie.poster" :alt="movie.title">
    <p>{{ movie.plot }}</p>
    <p>导演: {{ movie.director }}</p>
    <p>演员: {{ movie.actors }}</p>
    <p>评分: {{ movie.rating }}</p>
  </div>
</template>

<script>
export default {
  props: {
    movie: Object
  }
}
</script>

主组件整合功能

在主组件中整合列表和详情功能，并处理电影数据：

<template>
  <div class="movie-selector">
    <MovieList 
      :movies="movies" 
      :selectedMovie="selectedMovie"
      @movie-selected="handleMovieSelect"
    />
    <MovieDetails :movie="selectedMovie" />
  </div>
</template>

<script>
import MovieList from './MovieList.vue'
import MovieDetails from './MovieDetails.vue'

export default {
  components: {
    MovieList,
    MovieDetails
  },
  data() {
    return {
      movies: [],
      selectedMovie: null
    }
  },
  created() {
    this.fetchMovies()
  },
  methods: {
    fetchMovies() {
      // 这里可以是API调用或本地数据
      this.movies = [
        { id: 1, title: '电影1', year: 2020, poster: 'url1', plot: '剧情1', director: '导演1', actors: '演员1', rating: 8.5 },
        { id: 2, title: '电影2', year: 2021, poster: 'url2', plot: '剧情2', director: '导演2', actors: '演员2', rating: 7.8 }
      ]
    },
    handleMovieSelect(movie) {
      this.selectedMovie = movie
    }
  }
}
</script>

添加搜索功能

扩展功能添加电影搜索：

<template>
  <div class="movie-selector">
    <input 
      type="text" 
      v-model="searchQuery" 
      placeholder="搜索电影..."
      @input="searchMovies"
    >
    <!-- 原有组件 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    searchMovies() {
      if (this.searchQuery.trim() === '') {
        this.fetchMovies()
      } else {
        // 实际项目中这里应该是API调用
        this.movies = this.allMovies.filter(movie => 
          movie.title.toLowerCase().includes(this.searchQuery.toLowerCase())
        )
      }
    }
  }
}
</script>

使用Vuex管理状态

对于更复杂的应用，可以使用Vuex管理电影状态：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    movies: [],
    selectedMovie: null
  },
  mutations: {
    SET_MOVIES(state, movies) {
      state.movies = movies
    },
    SELECT_MOVIE(state, movie) {
      state.selectedMovie = movie
    }
  },
  actions: {
    fetchMovies({ commit }) {
      // API调用
      commit('SET_MOVIES', moviesData)
    }
  }
})

样式优化

添加基本样式增强用户体验：

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

.movie-list div {
  cursor: pointer;
  transition: transform 0.2s;
}

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

.selected {
  border: 2px solid #42b983;
  border-radius: 5px;
}

.movie-details {
  margin-top: 30px;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 5px;
}

input {
  padding: 10px;
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

通过以上方法可以实现一个完整的电影选择功能，包括列表展示、详情查看和搜索功能。实际项目中可以连接真实API获取电影数据，并根据需求扩展更多功能如分类筛选、收藏等。