Vuejs如何实现搜索匹配功能-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

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>    <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。

相信看了本文案例你已经掌握了方法，更多精彩请关注9543建站博客其它相关文章！