vue实现影片列表
Vue 实现影片列表
数据准备
创建一个包含影片信息的数组，每个影片对象包含标题、封面、评分等属性。数据可以存储在组件的 data 属性中或通过 API 获取。
data() {
return {
movies: [
{ id: 1, title: '影片1', cover: 'url1', rating: 8.5 },
{ id: 2, title: '影片2', cover: 'url2', rating: 7.3 },
{ id: 3, title: '影片3', cover: 'url3', rating: 9.1 }
]
}
}列表渲染
使用 v-for 指令遍历影片数组，动态生成列表项。每个列表项可以包含影片封面、标题和评分等信息。
<div class="movie-list">
<div v-for="movie in movies" :key="movie.id" class="movie-item">
<img :src="movie.cover" :alt="movie.title" class="movie-cover">
<h3>{{ movie.title }}</h3>
<span class="rating">{{ movie.rating }}</span>
</div>
</div>样式设计
为影片列表和列表项添加 CSS 样式，确保布局美观。可以使用 Flexbox 或 Grid 实现响应式布局。
.movie-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.movie-item {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
.movie-cover {
width: 100%;
height: auto;
border-radius: 4px;
}
.rating {
color: gold;
font-weight: bold;
}交互功能
为影片列表添加交互功能，例如点击影片跳转到详情页或悬停显示更多信息。使用 Vue 的事件绑定实现。
<div v-for="movie in movies" :key="movie.id" class="movie-item" @click="goToDetail(movie.id)">
<!-- 列表项内容 -->
</div>methods: {
goToDetail(id) {
this.$router.push(`/movie/${id}`);
}
}分页加载
如果影片数据较多，可以实现分页加载功能。通过计算属性或 API 分页参数控制当前显示的影片列表。
data() {
return {
currentPage: 1,
pageSize: 10
}
},
computed: {
paginatedMovies() {
const start = (this.currentPage - 1) * this.pageSize;
return this.movies.slice(start, start + this.pageSize);
}
}搜索与筛选
添加搜索框和筛选条件，允许用户按标题、评分等筛选影片。使用计算属性动态过滤影片列表。
<input v-model="searchQuery" placeholder="搜索影片">
<select v-model="ratingFilter">
<option value="">全部</option>
<option value="9">9分以上</option>
</select>computed: {
filteredMovies() {
return this.movies.filter(movie => {
const matchesSearch = movie.title.includes(this.searchQuery);
const matchesRating = !this.ratingFilter || movie.rating >= this.ratingFilter;
return matchesSearch && matchesRating;
});
}
}通过以上步骤，可以实现一个功能完善、交互友好的影片列表页面。根据实际需求，可以进一步扩展功能，如收藏、排序等。
