Maison >interface Web >js tutoriel >Comment implémenter la méthode de fonction de correspondance de recherche dans Vuejs (tutoriel détaillé)

Comment implémenter la méthode de fonction de correspondance de recherche dans Vuejs (tutoriel détaillé)

亚连original: 2018-06-01 15:35:023315parcourir

Ci-dessous, je vais partager avec vous une méthode d'implémentation de la fonction de correspondance de recherche basée sur Vuejs. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

J'ai regardé vue récemment, vérifié beaucoup d'informations, lu beaucoup de documents et de blogs, j'ai probablement une demi-compréhension, puis j'ai utilisé les connaissances que j'ai comprises pour rédiger une recherche et une correspondance simples fonction.

Cela ressemble probablement à ceci :

Les données sont toutes fausses

Partie de code

(Notez que j'ai cité le fichier vue.min.js local, veuillez faire attention au chemin du fichier.)

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

En fait, l'algorithme de base est toujours écrit en JS natif. Vue fournit une méthode de liaison de données très puissante, mais si vous ne connaissez que le framework Vue et n'avez pas vos propres idées de base, c'est toujours le cas. de peu d'utilité, donc l'auteur officiellement Le document dit que nous espérons avoir une certaine base en JS. Je pense toujours que quel que soit le nombre de frameworks front-end, le plus puissant sera toujours JS natif.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus