本篇文章主要介紹了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="{'color':item.sort<=10?'#f2972e':''}" v-cloak>{{item.Data | two}}</a>
</td>
<td><span v-text="item.Good"></span></td>
</tr>
</tbody>
</table>#頁面佈局成功之後，就是要做js配置了，首先是data初始化。
data:{
list0:[],//原始
listt0:[],//处理过的
name:'',//搜索框内容
},接下來取得後台數據，後台資料必須是一次傳遞給前端，原因你懂的。
created:function(){
//这获取数据且list0以及listt0都为获取到的数据
},搜尋的實作,判斷如果是數字就依照sort搜索，不是數字則依照city搜尋。一個簡單的搜尋就完成了。
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.濾鏡two
filters: {//保留两位小数点
two : function(value){
if (!value) { return ''};
return value.toFixed(2);
}
}上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
如何學習node中process以及child_process模組（詳細教學）
以上是在vue2中如何使用前端搜尋？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
