How to implement search matching function method in Vuejs (detailed tutorial)-JS Tutorial-php.cn

How to implement search matching function method in Vuejs (detailed tutorial)

亚连

Release： 2018-06-01 15:35:02

Original

3310 people have browsed it

Below I will share with you an implementation method of the search matching function based on Vuejs. It has a good reference value and I hope it will be helpful to everyone.

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.)

<!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(&#39;price&#39;, false)">↑</span>
            <span @click="orderFn(&#39;price&#39;, true)">↓</span>
          </th>
          <th>销量
            <span @click="orderFn(&#39;sales&#39;, false)">↑</span>
            <span @click="orderFn(&#39;sales&#39;, true)">↓</span>
          </th>
        </tr>
        <tr v-for=&#39;(item, key) in list&#39;>
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
          <td>{{item.sales}}万</td>
        </tr>
      </table>
    </p>
    <script type="text/javascript">
      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>
  </body>
</html>

Copy after login

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 writes in the official documentation Said that I hope we have some basic knowledge of JS. I still think that no matter how many front-end frameworks there are, the most powerful one will always be native JS.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

p5.js Pythagoras tree implementation code

Lightweight JS Cookie plug-in js- How to use cookies

A brief discussion on Webpack persistent caching practice

The above is the detailed content of How to implement search matching function method in Vuejs (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!