在vue2中如何使用前端搜尋？-js教程-PHP中文網

在vue2中如何使用前端搜尋？

亚连

發布： 2018-06-04 14:13:32

原創

1841 人瀏覽過

本篇文章主要介紹了vue2 前端搜尋實作範例，現在分享給大家，也給大家做個參考。

專案資料少的時候，搜尋這樣的小事情就要交給咱們前端來做了，重要聲明，適用於小專案！！！！！

其實原理很簡單，小demo是做搜尋市區名稱或是依照排名搜尋。

<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初始化。

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

登入後複製

接下來取得後台數據，後台資料必須是一次傳遞給前端，原因你懂的。

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

登入後複製

搜尋的實作,判斷如果是數字就依照sort搜索，不是數字則依照city搜尋。一個簡單的搜尋就完成了。

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

登入後複製

小知識點：

　　1. :style="{'color':item.sort<=10?'#f2972e ':''}" :style設定前10名的文字顏色。

　　2. !isNaN(parseInt(_this.name)) 判斷輸入的是數字還是文字，如果有數字就會按照數字搜尋。

　 3.濾鏡two

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

登入後複製

上面是我整理給大家的，希望今後會對大家有幫助。

如何學習node中process以及child_process模組（詳細教學）

透過在Vue2.0中實作http請求以及loading展示

透過jQuery JSONP中跨域請求的方法（詳細教學）

以上是在vue2中如何使用前端搜尋？的詳細內容。更多資訊請關注PHP中文網其他相關文章！