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