Wie verwende ich die Front-End-Suche in vue2?

In diesem Artikel wird hauptsächlich das Implementierungsbeispiel für die Vue2-Front-End-Suche vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

Wenn die Projektdaten klein sind, müssen kleine Dinge wie die Suche unserem Frontend überlassen werden. Wichtige Aussage, geeignet für kleine Projekte! ! ! ! !

Tatsächlich ist das Prinzip sehr einfach. Die kleine Demo besteht darin, nach Städtenamen zu suchen oder nach Rankings zu suchen.

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

Nachdem das Seitenlayout erfolgreich ist, ist es an der Zeit, die js zu konfigurieren Dateninitialisierung.

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

Als nächstes müssen die Hintergrunddaten auf einmal an das Frontend übergeben werden, Sie kennen den Grund.

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

Implementierung der Suche. Wenn es sich um eine Zahl handelt, suchen Sie nach der Sortierung. Wenn es sich nicht um eine Zahl handelt, suchen Sie nach der Stadt. Eine einfache Suche und Sie sind fertig.

        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('请输入筛选条件!')
             };
           }
        },

Tipps:

　1. :style="{'color':item.sort<=10?'#f2972e ': ''}" :style legt die Textfarbe der Top 10 fest.

　2. !isNaN(parseInt(_this.name)) Bestimmt, ob die Eingabe eine Zahl oder ein Text ist. Wenn Zahlen vorhanden sind, wird nach den Zahlen gesucht.

3. Filtern Sie zwei

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So lernen Sie die Prozess- und Child_Process-Module im Knoten (ausführliches Tutorial)

Mit Vue2 .0 HTTP-Anfrage und Ladeanzeige implementieren in

Methode der domänenübergreifenden Anfrage über jQuery+JSONP (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonWie verwende ich die Front-End-Suche in vue2?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!