vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据


Posted in Javascript onOctober 26, 2020

本文实例为大家分享了vuejs实现搜索筛选、降序排序数据的具体代码,供大家参考,具体内容如下

先上输入前的样子:

vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

<style>
#example{margin:100px auto;width:600px;}
.show{margin:10px;}
#searchText{display: block;margin:0 auto 10px;height:24px;line-height: 24px;width:200px;}
.content ul li{text-align: center;}
.content ul li span{display: inline-block;width:150px;font-size:15px;color:#000;}
</style>
</head>
<body>
<div id="example">
 <input type="text" id="searchText" placeholder="搜索id或者姓名" v-model="searchData"/>
 <div class="content">
 <ul>
  <li v-for="item in items | filterBy searchData in 'id' 'name' | orderBy 'name' '-1'">
  <span>{{item.id}}</span>
  <span>{{item.name}}</span>
  <span>{{item.time}}</span>
  </li>
 </ul>
 </div>
</div>
<script>
 var example1 = new Vue({
 el: '#example',
 data: {
  searchData:'',
 items: [
  {id:'1008',name:'涛涛',time:'20170207'},
  {id:'1098',name:'合同',time:'20170213'},
  {id:'1107',name:'晓丽',time:'20170304'},
  {id:'1004',name:'小兰',time:'20170112'},
  {id:'1102',name:'财务',time:'20170203'},
  {id:'1108',name:'哈哈',time:'20170208'},
  {id:'1345',name:'测试',time:'20170201'},
 ] 
 },
 ready:function(){
  
 },
 watch:{
  items:{
  handler:function(val,oldval){
   
  },
  deep:true
  }
 },
 
 methods:{
  
 }
 })
</script>

当在输入框中输入'合同',得到结果如图:

vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
简单实现node.js图片上传
Dec 18 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 #Javascript
javascript常用的设计模式
Feb 09 #Javascript
简单实现js选项卡切换效果
Feb 09 #Javascript
原生JS轮播图插件
Feb 09 #Javascript
jQuery页面弹出框实现文件上传
Feb 09 #Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 #Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 #Javascript
You might like
php Undefined index的问题
2009/06/01 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
js类中的公有变量和私有变量
2008/07/24 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
Vue组件化开发思考
2018/02/02 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
Python文件和目录操作详解
2015/02/08 Python
python模拟鼠标拖动操作的方法
2015/03/11 Python
python中管道用法入门实例
2015/06/04 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Python实现自动签到脚本功能
2020/08/20 Python
python 星号(*)的多种用途
2020/09/21 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
早会主持词
2014/03/17 职场文书
大学生个人求职信
2014/06/02 职场文书
学前教育专业求职信
2014/09/02 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL