本文主要和大家分享Vuejs搜索匹配功能实例，最近一直在看vue，查了很多资料，看了很多文档和博客，大概半知半解了，然后利用所理解的知识写了一个简单的搜索匹配功能。
大概长这个样子：
nbsp;html>Vue测试2 *{padding: 0;margin: 0;font-size: 14px;font-family: "微软雅黑";}#box{width: 500px;height: auto;border: 1px solid #ccc;margin: 50px auto;padding: 10px;}.search{width: 480px;height: 100px;text-align: center;}.searchBox{width: 230px;height: 40px;outline: none;text-indent: 10px;margin-right: 20px;}.btn{width: 100px;height: 50px;cursor: pointer;font-size: 18px;}.goodsheet{width: 500px;height: auto;border: 1px solid #eee;}.goodsheet tr td, .goodsheet tr th{width: 33%;border: 1px solid #eee;padding: 5px 10px;text-align: left;}.goodsheet tr th span{background: #ff9900;padding: 0 6px;color: #fff;cursor: pointer;}
登录后复制
商品名 单价↑↓ 销量↑↓{{item.name}}{{item.price}}{{item.sales}}万var myVueTest = new Vue({el:'#box',data:{goodsList:[//假数据{name:”三星Galaxy Note8″,price:5200,sales:2.6},{name:”iphone5s”,price:2500,sales:2.2},{name:”iphone6″,price:2800,sales:1.6},{name:”iphone6s”,price:3200,sales:2.9},{name:”iphone7″,price:3800,sales:12.6},{name:”iphone7plus”,price:4200,sales:2.1},{name:”iphone8″,price:5500,sales:10.6},{name:”华为”,price:4600,sales:7.6},{name:”小米”,price:1200,sales:32.6},{name:”OPPOR11″,price:3000,sales:1.2},{name:”vivoX20″,price:3250,sales:2.9}],searchVal:'', //默认输入为空letter:'', //默认不排序original:false //默认从小到大排列},methods:{orderFn(letter,original){this.letter = letter; //排序字段 price or sales this.original = original; //排序方式 up or down}},//通过计算属性过滤数据computed:{list: function(){var _this = this;//逻辑–>根据input的value值筛选goodsList中的数据var arrByZM = [];//声明一个空数组来存放数据for (var i=0;i升序降序排列 false: 默认从小到大 true：默认从大到小//判断，如果要letter不为空，说明要进行排序if(this.letter != ''){arrByZM.sort(function( a , b){if(_this.original){return b[_this.letter] – a[_this.letter];}else{return a[_this.letter] – b[_this.letter];}});}//一定要记得返回筛选后的数据return arrByZM;}}});
相关推荐：
php ajax实输入自动搜索匹配程序代码_PHP教程
以上就是Vuejs搜索匹配功能实例详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2785865.html
