开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程列表前端（2）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11475
课程列表前端（2）
内容介绍：
一、分页显示
二、判断课程是否免费
一、分页显示
公共分页开始
<div><divclass="paging"><!-- undisable 这个 class 是否存在，取决于数据属性 hasPrevious -->
<a:class="{undisable:!data.hasPrevious}"href="#"title=首页"
@click.prevent="gotoPage(1)">首</a><a:class="{undisable: !data .hasPrevious}"href="#"title="前一页"
@click.prevent=" gotoPage( data . current-1)"><</a><av-for="page in data . pages"
:key="page”
:class-"{current: data.current == page, undisable: data.current == page}":title="'第'+page+'页'"href="#"@click. prevent-" gotoPage(page)">{{page}}</a><a
:class-"{undi sable: ! data .hasNext}"href="#"title="后一页"
@click.prevent=" gotoPage( data .current+1)">></a><a:class-"{undisable: !data .hasNext}"
href="#"title="末页"
@c1ick.prevent=" gotoPage( data . pages)">末</a><div class="clear"/>
</div></div>
二、判断课程是否免费
默认为免费，现在需要做判断，如果课程不是免费的，需要做个支付才能观看，看什么时候显示、什么时候不显示，来到课程表。找一个字段。
Price是一个价格，如果价格为零，就是免费的，如果不是不收费的，就要花钱，就可以判断，当价格值为零，显示免费，如果不是零就是不显示，然后就可以收费。
1、用 v-if 方法判断
<sectionclass="mt10hLh20of"><spanv-if="Number(item.price) === 0" class="fr jgTag bg-green">
<iclass="c-ffffsize12flfA">免费</i>
</span><span class="fl jgAttr c-ccc f-fA"><і сlаѕѕ="с-999 f-fА">96З4人学习</і><i class="c-999 f- fA">9634评论</i>
</span></section>
结果显示有的是免费，有的不是免费，如果没有显示，那就不是零。进行说明，两个是免费，其他的都是收费，数据库中价格都0.01，另外有两个是0.00（免费）。
课程类别的一级分类显示做到，还缺少条件查询，点前端开发，这下面会显示前端开发下面的二级分类，而点开的同时要做一个条件查询（包括点二级分类也要做查询），另外点击关注度最新或者价格，会默认有一个排序。
