【WEB前端全栈成长计划】第三阶段 考核开发实录（五）
【摘要】 根据第三阶段的作业需求，还需要做MOOC课程页面，我们简单来看看页面内容： 主要就是框红框这部分，我观察了下其他的页面，培训认证，在线实验等，都是一样的文档结构，所以在做MOOC课程的时候，我将页面主要分成顶部和主体两个部分，也就是两个组件啦 这几个组件好几个页面有用到，所以我新建了一个目录叫public，用于放置公共组件，下面那几个tab组件，是因为页面主体有个tab切...
根据第三阶段的作业需求，还需要做MOOC课程页面，我们简单来看看页面内容：
主要就是框红框这部分，我观察了下其他的页面，培训认证，在线实验等，都是一样的文档结构，所以在做MOOC课程的时候，我将页面主要分成顶部和主体两个部分，也就是两个组件啦
这几个组件好几个页面有用到，所以我新建了一个目录叫public，用于放置公共组件，下面那几个tab组件，是因为页面主体有个tab切换效果，我就先建了出来。
新建完所需要的组件，后面的操作步骤和前面首页是一样的，即在MOOC课程组件CloudClassroom.vue内引入组件，使用组件，这里需要提一嘴的是，这个页面，有个tab切换功能：
需要我们用到@click去绑定一个方法用于实现tab切换功能，代码如下：
<template>
<div>
<publicHead></publicHead>
<div>
<span v-for="(tab,index) in tabs" @click="toggle(index,tab.view)" :class="{active:active==index}">{{tab.name}}</span>
</div>
<component :is="currentView"></component>
</div>
</template>
<script>
import publicHead from '../components/public/publicHead.vue'
import tab1Content from '../components/public/tab1Content.vue'
import tab2Content from '../components/public/tab2Content.vue'
import tab3Content from '../components/public/tab3Content.vue'
import tab4Content from '../components/public/tab4Content.vue'
export default {
data() {
return {
active: 0,
currentView: 'tab1Content',
tabs: [{
name: '热门课程',
view: 'tab1Content'
}, {
name: '热门活动',
view: 'tab2Content'
}, {
name: '云课程',
view: 'tab3Content'
}, {
name: '热门活动',
view: 'tab4Content'
}]
}
},
components: {
publicHead,
tab1Content,
tab2Content,
tab3Content,
tab4Content
},
methods: {
toggle(i, v) {
this.active = i;
this.currentView = v;
}
},
}
</script>
<style>
.active{
color: #5e7ce0;
border-bottom: 2px solid #5e7ce0;
padding-bottom: 5px;
}
</style>
组件publicHead的内容我们就略过了，很简单，我们看下classListsContent.vue组件的代码：
<template>
<div>
<div>
<span :class="{activeIndex:activeIndex==index}" v-for="(value,index) in selectListsData" :key="index" @click="chooseClass(index)">{{value.name}}</span>
</div>
<div>
<a v-if="activeIndex == 0 || value.classGroup == activeIndex" href="" v-for="value in classListsData">
<div></div>
<div>
<div>
<div>
<span>{{value.courseName}}</span>
</div>
<div>
<span>
<i></i>
<span>{{value.classroomUser}}</span>
</span>
<span>
<i></i>
<span> {{value.classroomSchool}}</span>
</span>
</div>
</div>
</div>
</a>
</div>
</div>
</template>
<script>
export default{
data(){
return {
activeIndex: 0,
selectListsData:[{
name:'全部',
index:0
},{
name:'算法与数据结构',
index:1
},{
name:'应用开发',
index:2
},{
name:'Android前端影视制作UI产品经理运营',
index:3
}],
classListsData:[{
courseName:'三天玩转最优路径算法',
classroomUser:'Classroom',
classroomSchool:'华为云',
classGroup:1
},{
courseName:'基于ROMA及AppEngine告警...',
classroomUser:'Classroom',
classroomSchool:'华为云',
classGroup:1
},{
courseName:'Android核心技术系列之一-初...',
classroomUser:'尚硅谷',
classroomSchool:'华为云',
classGroup:1
},{
courseName:'Android核心技术系列之二...',
classroomUser:'尚硅谷',
classroomSchool:'华为云',
classGroup:2
},{
courseName:'区块链入门',
classroomUser:'博学谷',
classroomSchool:'华为云',
classGroup:2
},{
courseName:'Spring定时任务2步轻松搞定',
classroomUser:'博学谷',
classroomSchool:'华为云',
classGroup:2
},{
courseName:'Node.js指南系列之Node NPM',
classroomUser:'尚硅谷',
classroomSchool:'华为云',
classGroup:2
},{
courseName:'Node.js指南系列之Node简介',
classroomUser:'尚硅谷',
classroomSchool:'华为云',
classGroup:3
},{
courseName:'Node.js指南系列之Node文件操作',
classroomUser:'尚硅谷',
classroomSchool:'华为云',
classGroup:3
}]
}
},
methods:{
chooseClass:function(index){
console.log(index);
this.activeIndex = index;
}
}
}
</script>
<style>
.activeIndex{
color: #5e7ce0;
border-bottom: 2px solid #5e7ce0;
padding-bottom: 5px;
}
</style>
这里大家需要注意看的是我重构的数据结构，以及课程按钮切换功能，我是用chooseClass方法来设置当前选择的标签的index，然后使用v-if去做判断，是否让当前课程显示。具体的同学们可以看看我的代码，MOOC课程页面就搭建完成了，看下效果：
其实不论是课程切换还是课程标签切换，我用的是一样的方法逻辑，以上就是我完成WEB全栈课程第三阶段作业的大致流程，这里分享给大家，文章中提到的是最常用到的一些用法，涉及到axios和vuex等稍微复杂的技术的，这里没有使用的需求，如果以后我有用到，我会接着分享到博客里哦，如果有不正确的地方，欢迎大家批评指正！
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）