How Vuejs implements search matching function

This time I will show you how Vuejs implements the search matching function. What are the precautions for Vuejs to implement the search matching function. The following is a practical case, let's take a look.

I have been looking at vue recently. I checked a lot of information, read a lot of documents and blogs, and probably had a partial understanding of it. Then I used the knowledge I understood to write a simple search and matching function.

It probably looks like this:

The data is all fake

Code part

(Note that I am referencing the local vue.min.js file, please pay attention to the file path.)

nbsp;html>

  
    <meta>
    <title>Vue测试2</title>
    <script></script>
    <style>
      *{
        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>
  
  
    <p>
      </p><p>
        <input>
        <button>搜 索</button>
      </p>
      

                                                                                                            

商品名	单价             ↑             ↓	销量             ↑             ↓
{{item.name}}	{{item.price}}	{{item.sales}}万

         <script> var myVueTest = new Vue({ el:&#39;#box&#39;, 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:&#39;&#39;, //默认输入为空 letter:&#39;&#39;, //默认不排序 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 != &#39;&#39;){ 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>   

In fact, the core algorithm is still written in native JS. Vue provides a very powerful data binding method, but if you only know the vue framework and do not have your own core ideas, it is still of little use. So the author said in the official document that we hope we have a certain JS foundation. I still think that no matter how many front-end frameworks there are, the most powerful one will always be native JS.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed graphic explanation of Vue.directive()

Module loader using javascript

The above is the detailed content of How Vuejs implements search matching function. For more information, please follow other related articles on the PHP Chinese website!