当前位置：首页 > VUE

vue实现电影选择

2026-01-08 17:06:17VUE

Vue实现电影选择功能

使用Vue实现电影选择功能可以通过以下方式完成：

创建Vue实例和数据 在Vue实例中定义电影列表数据，包含电影名称、图片、评分等信息。

new Vue({
  el: '#app',
  data: {
    movies: [
      { id: 1, title: '肖申克的救赎', poster: 'url1', rating: 9.7, selected: false },
      { id: 2, title: '阿甘正传', poster: 'url2', rating: 9.5, selected: false },
      { id: 3, title: '泰坦尼克号', poster: 'url3', rating: 9.4, selected: false }
    ],
    selectedMovie: null
  }
})

实现选择功能 通过v-for指令渲染电影列表，并为每个电影项添加点击事件。

<div id="app">
  <div class="movie-list">
    <div 
      v-for="movie in movies" 
      :key="movie.id"
      @click="selectMovie(movie)"
      :class="{ 'selected': movie.selected }"
    >
      <img :src="movie.poster" :alt="movie.title">
      <h3>{{ movie.title }}</h3>
      <p>评分: {{ movie.rating }}</p>
    </div>
  </div>
  <div v-if="selectedMovie" class="selected-movie">
    <h2>已选择: {{ selectedMovie.title }}</h2>
  </div>
</div>

添加样式 为选中的电影添加特殊样式，提高用户体验。

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

.movie-list > div {
  cursor: pointer;
  border: 1px solid #ddd;
  padding: 10px;
  width: 200px;
}

.selected {
  border: 2px solid #42b983;
  background-color: #f5f5f5;
}

.selected-movie {
  margin-top: 20px;
  padding: 15px;
  background-color: #42b983;
  color: white;
}

实现选择逻辑 在methods中添加selectMovie方法，处理电影选择逻辑。

methods: {
  selectMovie(movie) {
    // 重置所有电影的选中状态
    this.movies.forEach(m => m.selected = false);
    // 设置当前电影为选中状态
    movie.selected = true;
    this.selectedMovie = movie;
  }
}

优化体验 可以添加搜索功能，方便用户快速找到想看的电影。

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

<div v-for="movie in filteredMovies">
  <!-- 电影项 -->
</div>

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

通过以上步骤，可以构建一个基本的电影选择功能，用户可以从列表中选择喜欢的电影，系统会显示用户的选择并提供视觉反馈。

vue实现电影选择