开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):课程列表前端(4)】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/667/detail/11477
课程列表前端(4)
内容介绍:
一、 一级查询
二、 二级查询
三、 排序查询
一、一级查询
代码示例:
<dl>
<dt>
< span class="c-999 fsize14">< / span>
< / dt>
<dd class="c-s-d1-li">
<ul class="clearfix">
<li v-for="(item,index) in subSubjectList":key="index" : lass= " {active:twoIndex==index}">
<a:title="item.title"href=”#"@click=”searchTwo(item.id,index)>{{item.title}}</a>
< /li>
</ul>
< / dd>
</ dl>
二、二级查询
代码示例:
//5点击某个二级分类实现查询
searchTwo( subjectId,index){
//把index赋值,为了样式生效
this.twoIndex = index
//把二级分类点击id值,赋值给
searchobjthis.searchObj.subjectId = subjectId
//点击某个二级分类进行条件查询
this.gotoPageK (1)
刷新后,点击课程,点前端开发点 JavaScript
点击 jQuery,显示如下
按照格式配置完成代码
代码示例
//4点击某个一级分类,查询对应二级分类
searchone( subjectParentId,index) {
//把传递index值赋值给oneIndex,为了active样式生效
this.oneIndex = index
this.twoIndex = -1
this.searchobj.subjectId = ""this.subSubjectList = [ ]
//把一级分类点击id值,赋值给searchobj
this.searchobj.subjectParentId = subjectParentId
//点击某个一级分类进行条件查询
this.gotoPage(1)
//拿着点击一级分类id 和所有一级分类id进行比较
//如果id相同,从一级分类里面获取对应的二级分类
for( let i-o;icthis.subjectNestedList.length;itr) {
//获取每个一级分类
var oneSubject = this.subjectNestedList[i]
//比较id是否相同
if( subjec tParentId == oneSubject.id){
//从一级分类里面获取对应的二级分类
this.subSubjectList = oneSubject.children}
}
}
三、 排序查询
1.根据销量排序
代码示例:
searchBuyCount( ) {
//设置对应变量值,为了样式生效this.buyCountSort = "1""
this.gmtCreateSort = “”
this.priceSort = ""
//把值赋值到searchobj
this.search0bj.buyCountSort = this.buyCountSort
this.searchObj.gmtCreateSort = this.gmtCreateSort;
this.search0bj.priceSort = this.priceSort;
//调用方法查询
this.gotPage( 1)
}
对下列内容进行排序
刷新后的列表
2.根据最新排序
代码示例:
searchGmtCreate( ) {
//设置对应变量值,为了样式生效
this.buyCountSort = ""
this.gmtCreateSort = "1"
this.pricesort = ""
//把值赋值到searchobj
this.searchobj.buyCountSort = this.buyCountSort
this.search0bj.gmtCreateSort = this.gmtCreateSort;
this.searchobj.priceSort = this.priceSort;
//调用方法查询
this.gotoPage( 1)
}
刷新后
3. 根据价格排序
代码示例:
searchGmtCreate( ) {
//设置对应变量值,为了样式生效
this.buyCountSort = ""
this.gmtCreateSort = ""
this.pricesort = "1"
//把值赋值到searchobj
this.searchobj.buyCountSort = this.buyCountSort
this.search0bj.gmtCreateSort = this.gmtCreateSort;
this.searchobj.priceSort = this.priceSort;
//调用方法查询
this.gotoPage( 1)
}
刷新后: