Heim > Web-Frontend > js-Tutorial > Hauptteil

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

亚连
Freigeben: 2018-06-04 14:13:32
Original
1841 Leute haben es durchsucht

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>
Nach dem Login kopieren

<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>
Nach dem Login kopieren

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

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

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

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

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[&#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;)
             };
           }
        },
Nach dem Login kopieren

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 &#39;&#39;};
            return value.toFixed(2);
          }
        }
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage