微信小程序的发布_基于Vuejs的查找匹配功用完成

基于Vuejs的搜索匹配功能实现方法       下面小编就为大家分享一篇基于Vuejs的搜索匹配功能实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

最近一直在看vue，查了很多资料，看了很多文档和博客，大概半知半解了，然后利用所理解的知识写了一个简单的搜索匹配功能。

大概长这个样子：

数据都是假的

代码部分

（注意我引用的是本地vue.min.js文件，请注意文件路径。）

 !DOCTYPE html 
 html 
 head 
 meta charset="utf-8" 
 title Vue测试2 /title 
 script type="text/javascript" src="vue.min.js" /script 
 style type="text/css" 
 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;
 /style 
 /head 
 body 
 div id="box" 
 div 
 input type="text" v-model="searchVal" 
 button 搜 索 /button 
 /div 
 table 
 th 商品名 /th 
 th 单价
 span @click="orderFn('price', false)" ↑ /span 
 span @click="orderFn('price', true)" ↓ /span 
 /th 
 th 销量
 span @click="orderFn('sales', false)" ↑ /span 
 span @click="orderFn('sales', true)" ↓ /span 
 /th 
 /tr 
 tr v-for='(item, key) in list' 
 td {{item.name}} /td 
 td {{item.price}} /td 
 td {{item.sales}}万 /td 
 /tr 
 /table 
 /div 
 script type="text/javascript" 
 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 this.goodsList.length;i++){
 //for循环数据中的每一项（根据name值）
 if(this.goodsList[i].name.search(this.searchVal) != -1){
 //判断输入框中的值是否可以匹配到数据，如果匹配成功
 arrByZM.push(this.goodsList[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;
 /script 
 /body 
 /html 

其实核心算法还是用原生JS写的，vue提供了很强大的数据绑定方法，但是如果只知道vue这个框架，没有自己的核心思想的话，还是没多大用处的，所以作者在官方文档里面说希望我们是有一定JS基础的。我还是觉得前端框架再多，最厉害的永远是原生JS。

以上这篇基于Vuejs的搜索匹配功能实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持凡科。