vue实现选电影
Vue实现电影选择功能
使用Vue实现电影选择功能可以通过以下方式完成：
创建Vue项目 使用Vue CLI或Vite创建新项目，安装必要依赖如vue-router和axios。
设计数据结构 定义电影数据对象，包含id、标题、海报、简介、评分等属性。可以使用数组存储多个电影对象。
实现电影列表组件 创建MovieList组件，使用v-for指令循环渲染电影卡片。每个卡片显示电影基本信息和选择按钮。
<template>
<div class="movie-list">
<div v-for="movie in movies" :key="movie.id" class="movie-card">
<img :src="movie.poster" :alt="movie.title">
<h3>{{ movie.title }}</h3>
<p>{{ movie.description }}</p>
<button @click="selectMovie(movie)">选择</button>
</div>
</div>
</template>实现选择功能 在methods中定义selectMovie方法，处理电影选择逻辑。可以触发事件或更新状态管理。
methods: {
selectMovie(movie) {
this.$emit('movie-selected', movie)
// 或使用Vuex
this.$store.commit('setSelectedMovie', movie)
}
}添加状态管理 使用Vuex管理应用状态，创建movies模块存储电影列表和选中电影。
const store = new Vuex.Store({
modules: {
movies: {
state: {
movies: [],
selectedMovie: null
},
mutations: {
setMovies(state, movies) {
state.movies = movies
},
setSelectedMovie(state, movie) {
state.selectedMovie = movie
}
}
}
}
})实现电影详情组件 创建MovieDetail组件显示选中电影的详细信息。
<template>
<div v-if="selectedMovie" class="movie-detail">
<h2>{{ selectedMovie.title }}</h2>
<img :src="selectedMovie.poster" :alt="selectedMovie.title">
<p>评分: {{ selectedMovie.rating }}</p>
<p>{{ selectedMovie.description }}</p>
</div>
</template>获取电影数据 使用axios从API获取电影数据，更新到Vuex状态中。
created() {
axios.get('/api/movies')
.then(response => {
this.$store.commit('movies/setMovies', response.data)
})
}添加样式 为电影列表和详情组件添加CSS样式，提升用户体验。
.movie-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.movie-card {
border: 1px solid #ddd;
padding: 15px;
border-radius: 8px;
}实现搜索和筛选 添加搜索框和筛选选项，使用计算属性实现电影筛选功能。
computed: {
filteredMovies() {
return this.movies.filter(movie =>
movie.title.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}路由配置 使用vue-router配置路由，实现电影列表和详情页面的导航。
const routes = [
{ path: '/', component: MovieList },
{ path: '/movie/:id', component: MovieDetail }
]以上实现提供了完整的电影选择功能，包括列表展示、选择操作、状态管理和详情查看。可根据实际需求调整和扩展功能。
