Vuejs如何实现搜索匹配功能

互联网 18-3-27

这次给大家带来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>      <p id="box">        <p class="search">          <input type="text" class="searchBox" v-model="searchVal">          <button class="btn">搜 索</button>        </p>        <table class="goodsheet">          <tr>            <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>      </p>      <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。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！