时间:2021-05-26
本文实例为大家分享了vuejs实现搜索筛选、降序排序数据的具体代码,供大家参考,具体内容如下
先上输入前的样子:
<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>当在输入框中输入'合同',得到结果如图:
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
exc的升序降序在数据里,方法如下: 1、选中数据范围,点击数据; 2、点击筛选,选择自动筛选; 3、需要对哪列排序,直接点这列的下拉框,选择升序或者降序
Mysql在InnerDB引擎下,查询不带ORDERBY,会根据主键来排序,从小到大; 带ORDERBY的升序,降序: ORDERBY`id`ASC--
Vue2.0删除了很多1.0的比较实用的过滤器,如filterBy,orderBy。官方文档给了通过计算属性实现1.0搜索过滤器功能,自己又加入了大小写通用检索
数据排序asc、desc1、单一字段排序orderby字段名称作用:通过哪个或哪些字段进行排序含义:排序采用orderby子句,orderby后面跟上排序字段,
将Vue0.1里的过滤代码添加到Vue2.0,方法很简单,具体内容如下varfilters={orderBy:orderBy,filterBy:filterBy