这篇文章主要介绍“Vue怎么实现搜索筛选、降序排序数据”，在日常操作中，相信很多人在vue怎么实现搜索筛选、降序排序数据问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么实现搜索筛选、降序排序数据”的疑
这篇文章主要介绍“Vue怎么实现搜索筛选、降序排序数据”，在日常操作中，相信很多人在vue怎么实现搜索筛选、降序排序数据问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么实现搜索筛选、降序排序数据”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
先上输入前的样子：
代码如下：
<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具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
到此，关于“vue怎么实现搜索筛选、降序排序数据”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
--结束END--
本文标题: vue怎么实现搜索筛选、降序排序数据
本文链接: https://www.lsjlt.com/news/345145.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-10
2024-05-10
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0