この記事では主に vue2 フロントエンド検索の実装例を紹介しますので、参考にしてください。
プロジェクトのデータが小さい場合、検索などの小さなことはフロントエンドに任せる必要があります。これは小規模なプロジェクトに適しています。 ! ! ! !
実際、この小さなデモは、都市名を検索するか、ランキングに従って検索するというものです。
<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="{'color':item.sort<=10?'#f2972e':''}" v-cloak>{{item.Data | two}}</a> </td> <td><span v-text="item.Good"></span></td> </tr> </tbody> </table>
ページレイアウトが成功したら、最初はデータの初期化です。
data:{ list0:[],//原始 listt0:[],//处理过的 name:'',//搜索框内容 },
次に、バックグラウンドデータを取得します。バックグラウンドデータはフロントエンドに一度に渡される必要があります。理由はわかります。
created:function(){ //这获取数据且list0以及listt0都为获取到的数据 },
数値の場合はソート順に検索、数値でない場合は都市順に検索を実装します。簡単な検索で完了です。
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('请输入筛选条件!') }; } },
ヒント:
1. :style="{'color':item.sort<=10?'#f2972e':''}" :style は、上位 10 項目のテキストの色を設定します。
2. !isNaN(parseInt(_this.name)) 入力が数値かテキストかを判定します。数値がある場合は、数値に従って検索します。
3. フィルターを 2 つ
filters: {//保留两位小数点 two : function(value){ if (!value) { return ''}; return value.toFixed(2); } }
上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。
関連記事:
ノードの process モジュールと child_process モジュールを学ぶ方法 (詳細なチュートリアル)
Vue2.0 で http リクエストを実装し、表示を読み込む
jQuery+ を介したクロスドメイン リクエストJSONP メソッド (詳細なチュートリアル)
以上がvue2 でフロントエンド検索を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。