vue2 前端搜索實現(xiàn)示例
更新時間：2018年02月26日 14:59:29 作者：yue朔
本篇文章主要介紹了vue2 前端搜索實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
項目數(shù)據(jù)少的時候，搜索這樣的小事情就要交給咱們前端來做了，重要聲明，適用于小項目！?。。?！
其實原理很簡單，小demo是做搜索市區(qū)名稱或者按照排名搜索。
<div> <input type="text" v-model="name" placeholder="點擊搜索按鈕篩選" /> <input type="button" @click="search" /> </div>
<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:'',//搜索框內(nèi)容
},
接下來獲取后臺數(shù)據(jù)，后臺數(shù)據(jù)必須是一次性傳遞給前端，原因你懂的。
created:function(){
//這獲取數(shù)據(jù)且list0以及l(fā)istt0都為獲取到的數(shù)據(jù)
},
搜索的實現(xiàn),判斷如果是數(shù)字就按照sort搜索，不是數(shù)字則按照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設(shè)置前10名的文字顏色。
2. !isNaN(parseInt(_this.name)) 判斷輸入的是數(shù)字還是文字，如果有數(shù)字就會按照數(shù)字搜索。
3.過濾器two
filters: {//保留兩位小數(shù)點
two : function(value){
if (!value) { return ''};
return value.toFixed(2);
}
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中新增了setup,它的出現(xiàn)是為了解決組件內(nèi)容龐大后,理解和維護組件變得困難的問題,下面這篇文章主要給大家介紹了關(guān)于Vue3使用setup如何定義組件的name屬性的相關(guān)資料,需要的朋友可以參考下2022-06-06
Vue實現(xiàn)動態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法
下面小編就為大家分享一篇Vue實現(xiàn)動態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
從0搭建Vue3組件庫如何使用?glup?打包組件庫并實現(xiàn)按需加載
這篇文章主要介紹了從0搭建Vue3組件庫如何使用?glup?打包組件庫并實現(xiàn)按需加載，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了Vue響應(yīng)式系統(tǒng)的原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Vue-DPlayer是一個易于使用、高性能的基于Vue.js的視頻播放器組件,這篇文章將為大家詳細介紹一下vue-dplayer視頻播放器組件的安裝與使用,需要的小伙伴可以參考下2023-09-09
表格是前端非常常用的一個控件，本文主要為大家介紹了Vue3如何實現(xiàn)一個簡易的可以復制的表格，文中的示例代碼講解詳細，需要的可以參考一下2022-12-12
這篇文章主要給大家介紹了關(guān)于vue3標簽中的ref屬性詳解及如何使用$refs獲取元素的相關(guān)資料,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了如何使用vue實現(xiàn)跨域訪問第三方http請求,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
今天小編就為大家分享一篇在vue項目中,將juery設(shè)置為全局變量的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue+echarts實現(xiàn)動態(tài)折線圖的方法與注意
這篇文章主要給大家介紹了關(guān)于vue+echarts實現(xiàn)動態(tài)折線圖的方法與注意事項，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09