Vuejs에서 검색 일치 함수 메서드를 구현하는 방법(자세한 튜토리얼)-JS 튜토리얼-php.cn

Vuejs에서 검색 일치 함수 메서드를 구현하는 방법(자세한 튜토리얼)

亚连

풀어 주다： 2018-06-01 15:35:02

원래의

3260명이 탐색했습니다.

아래에서는 Vuejs를 기반으로 한 검색 매칭 기능의 구현 방법을 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

최근에 vue를 보다가 많은 정보를 확인하고 많은 문서와 블로그를 읽어보니 어느 정도 이해가 된 것 같습니다. 그러다가 제가 이해한 지식을 활용하여 간단한 검색과 매칭 기능을 작성하게 되었습니다. .

아마도 다음과 같을 것입니다:

데이터는 모두 가짜입니다

코드 부분

(로컬 vue.min.js 파일을 인용하고 있으니 비용을 지불하세요. 파일 경로에 주의하세요.)

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

로그인 후 복사

사실 핵심 알고리즘은 여전히 네이티브 JS로 작성되어 있습니다. Vue는 매우 강력한 데이터 바인딩 방법을 제공하지만 Vue 프레임워크만 알고 자신만의 핵심 아이디어가 없다면 아직은 거의 쓸모가 없기 때문에 저자는 공식 문서에서 JS에 확실한 기초가 있기를 바란다고 말합니다. 나는 여전히 프론트엔드 프레임워크가 아무리 많아도 가장 강력한 프레임워크는 항상 네이티브 JS일 것이라고 생각합니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.