利用Vue.js实现求职在线之职位查询功能 - 行业资讯 - 肥雀云

Vue。js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js, Vue.js提供了更加简洁,更易于理解的API,使得我们能够快速地上手并使用Vue.js。

本文主要介绍的是关于利用Vue.js实现职位查询功能的相关内容,分享出来供大家参考学习、下面来一起看看详细的介绍:

v, v, v,道具、释放美元,动态道具,类与样式绑定
　　

//分页　　出口。pageQuery=函数(页面、页大小模型、填充queryParams,投影,sortParams,回调){ 　　var开始=(- 1页)*页大小;//根据页面和页大小得到跳过要跳过的记录量　　var $页面={ 　　pageNumber:页面　　}；　　async.parallel ({ 　　数:函数(做){//查询到总共有数条数据　　Model.count (queryParams)。exec(函数(呃,计数){ 　　(呃,数); 　　}）; 　　}，　　记录:函数(做){//查询得到排序和排除字段的记录　　模型。找到(queryParams、投影).skip(开始).limit(页大小).populate(填充).sort (sortParams)。exec(函数(呃,doc) { 　　(呃,doc); 　　}）; 　　} 　　(呃,结果){},函数　　　　var=新数组列表(); 　　(让项results.records) { 　　list.push (item.toObject ()) 　　} 　　　　var计算=results.count; 　　美元的页面。pageCount=方法((数- 1)/页大小+ 1);//总页数　　美元的页面。结果=列表;//单页结果　　美元的页面。数=计数;//总记录量　　回调(呃,美元页面); 　　}）; 　　}; 　　　　

有了分页函数,查询工作函数只要传入参数即可。

　　　　//数据库命令,就是个正则表达式:/参数/db.getCollection(“工作”)。找到({公司:/网易/})//js里如果直接写/data.company/会是个字符串,Model.find({})函数识别不了的,只能用新的正则表达式() 　　公司:新RegExp (data.company) 　　　　　　//查询工作　　出口。findJobs=function(数据、cb) { 　　让searchItem={ 　　公司:新RegExp (data.company), 　　类型:新RegExp (data.type), 　　金钱:{$一种:数据。salaryMin $ lte:数据。salaryMax} 　　} 　　(让项searchItem){//若条件为空则删除该属性　　如果(searchItem[项目]==='//'){ 　　删除searchItem(项) 　　} 　　} 　　var=数据页。页面| | 1 　　这一点。pageQuery(页面、页大小的工作,“searchItem, {_id: 0, __v: 0}, { 　　钱:“asc” 　　}、功能(错误,数据){ 　　… 　　}）　　} 　　　　

利用Vue。js实现求职在线之职位查询功能
　　查询结果

利用Vue.js实现求职在线之职位查询功能

数据结构
　　

<强>说明:查询到的数据结果是对象数组,通过嵌套使用v代表轻松实现内容的展示
　　

　　　　//html 　　& lt; div类=" searchResult”比; 　　& lt;表类=氨韙able-hover”比; 　　& lt; tbody类=癹obList”比; 　　& lt; tr> 　　& lt; th)=氨晏庀钅俊痹趝{项}}& lt;/th> 　　& lt;/tr> 　　& lt; tr v="(项目、索引)searchResults”@click=皊howDesc(指数)比; 　　项& lt; td)=凹壑怠痹趝{value}} & lt;/td> 　　& lt;/tr> 　　& lt;/tbody> 　　& lt;/table> 　　& lt;/div> 　　　　　　//alt="利用Vue。js实现求职在线之职位查询功能">
　　详情卡片
　　

<强>说明:强通过点击单行数据显示自定义的详情框组件DescMsg来展示具体内容。
　　

<强>组成:遮罩+内容框
　　

<>强思路:点击父组件SearchJob中的单行数据,通过道具向子组件DescMsg传递选中行的数据jobDesc和showMsg:真正的显示子组件。点击子组件DescMsg除详情框外的其余部分,使用