Comment utiliser la recherche frontale dans vue2 ?-js tutoriel-php.cn

Comment utiliser la recherche frontale dans vue2 ?

亚连

Libérer： 2018-06-04 14:13:32

original

1841 Les gens l'ont consulté

Cet article présente principalement l'exemple d'implémentation de la recherche frontale vue2. Maintenant, je le partage avec vous et le donne comme référence.

Lorsque les données du projet sont petites, les petites choses comme la recherche doivent être laissées à notre front-end. Déclaration importante, adaptée aux petits projets ! ! ! ! !

En fait, le principe est très simple. La petite démo consiste à rechercher des noms de villes ou à effectuer une recherche selon des classements.

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

Copier après la connexion

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

Copier après la connexion

Une fois la mise en page réussie, il est temps de configurer le js . La première chose est l'initialisation des données.

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

Copier après la connexion

Ensuite, récupérez les données d'arrière-plan Les données d'arrière-plan doivent être transmises au front-end en une seule fois, vous connaissez la raison.

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

Copier après la connexion

Mise en œuvre de la recherche S'il s'agit d'un numéro, recherchez par tri. Si ce n'est pas un numéro, recherchez par ville. Une simple recherche et le tour est joué.

        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;)
             };
           }
        },

Copier après la connexion

Conseils :

　1. :style="{'color':item.sort<=10?' ':''}" :style définit la couleur du texte du top 10.

　2. !isNaN(parseInt(_this.name)) Détermine si l'entrée est un nombre ou du texte S'il y a des nombres, il recherchera en fonction des nombres.

3. Filtrez deux

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

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile dans le cas. avenir.

Articles associés :

Comment apprendre les modules process et child_process dans node (tutoriel détaillé)

En utilisant Vue2 .0 Implémenter la requête http et l'affichage de chargement dans

Méthode de requête inter-domaines via jQuery+JSONP (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!