基于vue卖课程系统的发现页面的制作代码
时间: 2023-12-23 14:02:36 浏览: 21
很抱歉,我无法提供完整的基于 Vue 的卖课程系统发现页面的制作代码。这是因为该系统需要根据具体的业务需求和数据结构进行设计和开发,涉及到的组件、功能和样式等方面都有很大的差异。
不过,我可以提供一些参考代码,供您参考:
```
<template>
<div class="course-discovery">
<div class="search-bar">
<input type="text" v-model="searchText" placeholder="输入关键字搜索" />
<button @click="search">搜索</button>
</div>
<div class="course-list">
<div v-for="course in filteredCourses" :key="course.id" class="course-item">
<img :src="course.cover" />
<h3>{{ course.title }}</h3>
<p>{{ course.description }}</p>
<button @click="goToDetail(course.id)">查看详情</button>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
searchText: ''
}
},
computed: {
...mapState({
courses: state => state.courses
}),
filteredCourses() {
return this.courses.filter(course => {
return course.title.includes(this.searchText)
})
}
},
methods: {
search() {
// 发起搜索请求
},
goToDetail(id) {
this.$router.push(`/course/${id}`)
}
}
}
</script>
<style>
.course-discovery {
padding: 20px;
}
.search-bar {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.course-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.course-item {
width: 30%;
margin-bottom: 20px;
text-align: center;
}
.course-item img {
width: 100%;
height: 200px;
object-fit: cover;
}
</style>
```
上面的代码展示了一个基本的课程发现页面的实现,包括搜索框、课程列表、课程详情跳转等功能。具体实现还需要根据业务需求进行调整。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)