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;
}
}
