课程列表前端(4) | 学习笔记

简介: 简介:快速学习课程列表前端(4)

开发者学堂课程【微服务+全栈在线教育实战项目演练(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

image.png

image.png

点击 jQuery,显示如下

image.png

按照格式配置完成代码

代码示例

//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)

}

对下列内容进行排序

image.png

刷新后的列表

image.png

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)

}

刷新后

image.png

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)

}

刷新后:

image.png

相关文章
|
23天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
35 0
|
4月前
|
存储 开发框架 前端开发
在Vue&Element前端项目中,对于字典列表的显示处理
在Vue&Element前端项目中,对于字典列表的显示处理
|
2月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
59 19
|
2月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
49 11
|
3月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
57 13
|
3月前
|
存储 开发框架 前端开发
EAV模型(实体-属性-值)的设计和低代码的处理方案(3)-- 实体属性定义及前端列表展示和数据录入处理
EAV模型(实体-属性-值)的设计和低代码的处理方案(3)-- 实体属性定义及前端列表展示和数据录入处理
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用
循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用
|
23天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
103 2
|
24天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
23天前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
下一篇
无影云桌面