Vuejs が検索マッチング機能を実装する方法

今回は、Vuejs が検索マッチング機能を実装する方法を説明します。Vuejs が検索マッチング機能を実装するための 注意点 については、次のとおりです。

私は最近 vue を見て、多くの情報を確認し、多くのドキュメントやブログを読み、おそらく半分の知識を持っており、理解した知識を使用して簡単な検索とマッチング関数を作成しました。

はおそらく次のようになります:

データはすべて偽物です

コード部分

(ローカルのvue.min.jsファイルを引用していることに注意してください。料金を払ってください)ファイル パスに注意してください。)

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>    実際、Vue は依然としてネイティブ JS で記述されており、非常に強力な

データ バインディング メソッドを提供します。ただし、Vue フレームワークを知っているだけで、独自のコアを持っていない場合は、アイデアはありますが、まだほとんど役に立ちません。そのため、著者は公式ドキュメントで、特定の JS 基盤があればいい、と述べています。フロントエンド フレームワークがどれほど多くても、最も強力なものは常にネイティブ JS であると今でも感じています。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue.directive()の詳細なグラフィック説明

JavaScriptを使用したモジュールローダー

以上がVuejs が検索マッチング機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。