vue实现电影选择

Vue实现电影选择功能

数据准备

创建电影数据数组，包含电影名称、海报、简介等信息。数据可以存储在组件的data中或通过API获取。

data() {
  return {
    movies: [
      { id: 1, title: '电影1', poster: 'url1', description: '简介1' },
      { id: 2, title: '电影2', poster: 'url2', description: '简介2' }
    ],
    selectedMovie: null
  }
}

电影列表展示

使用v-for指令渲染电影列表，为每个电影项添加点击事件。

<div class="movie-list">
  <div 
    v-for="movie in movies" 
    :key="movie.id"
    @click="selectMovie(movie)"
    class="movie-item"
  >
    <img :src="movie.poster" :alt="movie.title">
    <h3>{{ movie.title }}</h3>
  </div>
</div>

选择电影处理

在methods中定义选择电影的方法，更新selectedMovie数据。

methods: {
  selectMovie(movie) {
    this.selectedMovie = movie
  }
}

选中电影展示

创建区域展示选中电影的详细信息。

<div v-if="selectedMovie" class="selected-movie">
  <h2>{{ selectedMovie.title }}</h2>
  <img :src="selectedMovie.poster" :alt="selectedMovie.title">
  <p>{{ selectedMovie.description }}</p>
</div>

样式优化

添加CSS样式美化电影列表和选中状态。

.movie-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.movie-item {
  cursor: pointer;
  width: 150px;
  transition: transform 0.3s;
}

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

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

功能扩展

添加搜索过滤功能，使用计算属性实现。

computed: {
  filteredMovies() {
    return this.movies.filter(movie => 
      movie.title.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

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

响应式设计

使用媒体查询确保在不同设备上良好显示。

@media (max-width: 768px) {
  .movie-list {
    justify-content: center;
  }

  .movie-item {
    width: 120px;
  }
}