Comment implémenter la méthode de fonction de correspondance de recherche dans Vuejs (tutoriel détaillé)-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-01 15:35:02

original

3258 Les gens l'ont consulté

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>

Copier après la connexion

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.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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