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 相关文章推荐
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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开发模式(简写版)
2007/03/15 PHP
PHP引用返回用法示例
2016/05/28 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
html下载本地
2006/06/19 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
Python实战之制作天气查询软件
2019/05/14 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
什么是Remote Module
2016/06/10 面试题
卫校护理专业毕业生求职信
2013/11/26 职场文书
导游实习生自荐书
2014/01/28 职场文书
大学生交通专业求职信
2014/09/01 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书