vue2에서 프런트 엔드 검색을 사용하는 방법은 무엇입니까?

이 글에서는 주로 vue2 프론트엔드 검색 구현 예시를 소개하고 참고하겠습니다.

프로젝트 데이터가 작을 때는 검색과 같은 작은 일을 프론트엔드에 맡겨야 합니다. 중요한 설명은 소규모 프로젝트에 적합합니다! ! ! ! !

사실 원리는 매우 간단합니다. 작은 데모는 도시 이름을 검색하거나 순위에 따라 검색하는 것입니다.

<p>
   <input type="text" v-model="name" placeholder="点击搜索按钮筛选" />
   <input type="button" @click="search" />
</p>

<table>
     <tbody>
       <tr v-for="item in listt0">
        <td>
        <a v-text="item.sort"></a>
        </td>
        <td>
        <a v-text="item.City"></a>
        </td>
        <td>
          <a :style="{&#39;color&#39;:item.sort<=10?&#39;#f2972e&#39;:&#39;&#39;}" v-cloak>{{item.Data | two}}</a>
         </td>
          <td><span v-text="item.Good"></span></td>
          </tr>
        </tbody>
</table>

페이지 레이아웃이 성공했다면 이제 js를 구성할 차례입니다.

data:{
  list0:[],//原始
  listt0:[],//处理过的
  name:'',//搜索框内容
},

다음으로 배경 데이터를 가져옵니다. 배경 데이터를 한꺼번에 프런트 엔드에 전달해야 하는 이유는 아시죠.

created:function(){
  //这获取数据且list0以及listt0都为获取到的数据
},

검색 구현. 숫자인 경우 정렬에 따라 검색합니다. 숫자가 아닌 경우 도시별로 검색합니다. 간단하게 검색하면 끝입니다.

        methods:{
           search:function(){//搜索
             var _this=this;
             var tab=this['list0'];
             if(this.name){                   
              _this['listt0']=[];           
               if(!isNaN(parseInt(_this.name))) {
                for(i in tab) {
                  if(tab[i].sort == parseInt(_this.name)) {
                    _this['listt0'].push(tab[i]);
                  };
                };
              } else {
                for(i in tab) {
                  if(tab[i].City.indexOf(_this.name) >= 0) {
                    _this['listt0'].push(tab[i]);
                  };
                };
              };
             }else{
               alert('请输入筛选条件!')
             };
           }
        },

팁:

　1. :style="{'color':item.sort<=10?'#f2972e':''}" :style은 상위 10개의 텍스트 색상을 설정합니다.

　　2. !isNaN(parseInt(_this.name)) 입력된 내용이 숫자인지 텍스트인지 판단하여 숫자가 있으면 숫자에 따라 검색합니다.

3. 필터 2

     filters: {//保留两位小数点
          two : function(value){
            if (!value) { return ''};
            return value.toFixed(2);
          }
        }

위 내용은 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

노드에서 process 및 child_process 모듈을 학습하는 방법(자세한 튜토리얼)

Vue2.0에서 http 요청 구현 및 디스플레이 로딩

jQuery+를 통한 교차 도메인 요청 JSONP 방법(자세한 튜토리얼)

위 내용은 vue2에서 프런트 엔드 검색을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!