vue实现电影选择

Vue实现电影选择功能

使用Vue实现电影选择功能需要结合数据绑定、事件处理和组件化思想。以下是一个完整的实现方案：

数据准备 在Vue实例的data中定义电影列表和选中状态：

data() {
  return {
    movies: [
      { id: 1, title: '肖申克的救赎', selected: false },
      { id: 2, title: '阿甘正传', selected: false },
      { id: 3, title: '泰坦尼克号', selected: false }
    ],
    selectedMovies: []
  }
}

模板渲染 使用v-for指令渲染电影列表，并通过v-model绑定选择状态：

<div v-for="movie in movies" :key="movie.id">
  <label>
    <input 
      type="checkbox" 
      v-model="movie.selected"
      @change="updateSelection(movie)"
    >
    {{ movie.title }}
  </label>
</div>

选择逻辑处理 在methods中定义处理选择的方法：

methods: {
  updateSelection(movie) {
    if (movie.selected) {
      this.selectedMovies.push(movie.id)
    } else {
      const index = this.selectedMovies.indexOf(movie.id)
      this.selectedMovies.splice(index, 1)
    }
  }
}

显示选中结果 在模板中添加结果显示区域：

<div v-if="selectedMovies.length > 0">
  <h3>已选电影：</h3>
  <ul>
    <li v-for="id in selectedMovies" :key="id">
      {{ movies.find(m => m.id === id).title }}
    </li>
  </ul>
</div>
<div v-else>
  请选择至少一部电影
</div>

增强功能实现

多选限制 添加最大选择数量限制：

data() {
  return {
    maxSelection: 3
  }
}

methods: {
  updateSelection(movie) {
    if (movie.selected && this.selectedMovies.length >= this.maxSelection) {
      movie.selected = false
      alert(`最多只能选择${this.maxSelection}部电影`)
      return
    }
    // 原有逻辑...
  }
}

搜索过滤 添加搜索功能过滤电影列表：

data() {
  return {
    searchQuery: ''
  }
},

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

模板中修改v-for为使用过滤后的列表：

<input type="text" v-model="searchQuery" placeholder="搜索电影...">
<div v-for="movie in filteredMovies" :key="movie.id">
  <!-- 原有内容 -->
</div>

组件化实现

将电影选择功能拆分为独立组件：

// MovieSelector.vue
export default {
  props: ['movies', 'maxSelection'],
  data() {
    return {
      selectedMovies: []
    }
  },
  methods: {
    // 选择逻辑方法
  },
  template: `
    <div>
      <!-- 电影选择界面 -->
    </div>
  `
}

父组件中使用：

import MovieSelector from './MovieSelector.vue'

export default {
  components: { MovieSelector },
  data() {
    return {
      movieList: [
        // 电影数据
      ]
    }
  }
}

<movie-selector 
  :movies="movieList" 
  :max-selection="3"
  @selection-change="handleSelectionChange"
></movie-selector>

这种实现方式提供了完整的电影选择功能，包括基本选择、数量限制和搜索过滤，同时支持组件化复用。可以根据实际需求进一步扩展功能，如添加电影详情展示、评分系统等。