首頁 > web前端 > js教程 > 主體

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

亚连
發布: 2018-06-04 14:13:32
原創
1829 人瀏覽過

本篇文章主要介紹了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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!