Vue2.0實現(xiàn)1.0的搜索過濾器功能實例代碼
更新時間：2017年03月20日 16:47:36 作者：姜瑞濤
本篇文章主要介紹了Vue2.0實現(xiàn)1.0的搜索過濾器功能實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
Vue2.0刪除了很多1.0的比較實用的過濾器，如filterBy，orderBy。官方文檔給了通過計算屬性實現(xiàn)1.0搜索過濾器功能，自己又加入了大小寫通用檢索功能，比較簡單，學(xué)一下。
<body>
<div class="app">
<input type="text" v-model="name">
<ul>
<li v-for="user in newUsers" >
{{ user.name }}
</li>
</ul>
</div>
<script>
new Vue({
el: '.app',
data: {
name: '',
users: [
{ name: 'Bruce' },
{ name: 'Chuck' },
{ name: 'Jackie' },
{ name: '趙' }
]
},
computed: {
newUsers: function () {
var that = this;
return that.users.filter(function (user) {
return user.name.toLowerCase().indexOf(that.name.toLowerCase()) !== -1;
})
}
}
})
</script>
</body>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue一個動態(tài)添加background-image的實現(xiàn)
這篇文章主要介紹了Vue一個動態(tài)添加background-image的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
淺析Visual Studio Code斷點調(diào)試Vue
本篇文章給大家總結(jié)了Visual Studio Code斷點調(diào)試Vue的方法以及心得分享，需要的朋友參考學(xué)習(xí)下。2018-02-02
Vue中computed和watch的區(qū)別小結(jié)
watch和computed都是以Vue的依賴追蹤機(jī)制為基礎(chǔ)的,當(dāng)某一個依賴型數(shù)據(jù)發(fā)生變化的時候,所有依賴這個數(shù)據(jù)的相關(guān)數(shù)據(jù)會自動發(fā)生變化,即自動調(diào)用相關(guān)的函數(shù),來實現(xiàn)數(shù)據(jù)的變動，這篇文章簡單介紹下Vue中computed和watch的區(qū)別異同，感興趣的朋友一起看看吧2022-12-12
微信、支付寶支付密碼時的密碼輸入框大家都很熟悉，本文主要介紹了vue3如何實現(xiàn)?6位支付密碼輸入框，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue路由鉤子之a(chǎn)fterEach beforeEach的區(qū)別詳解
這篇文章主要介紹了Vue路由鉤子 afterEach beforeEach區(qū)別 ,vue-router作為vue里面最基礎(chǔ)的服務(wù),學(xué)習(xí)一段時間,對遇到的需求進(jìn)行一些總結(jié)。需要的朋友可以參考下2018-07-07
Vue2.0結(jié)合webuploader實現(xiàn)文件分片上傳功能
這篇文章主要介紹了Vue2.0結(jié)合webuploader實現(xiàn)文件分片上傳功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-03-03
vue-router判斷頁面未登錄自動跳轉(zhuǎn)到登錄頁的方法示例
這篇文章主要介紹了vue-router判斷頁面未登錄自動跳轉(zhuǎn)到登錄頁的方法示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
在網(wǎng)上各種找不到vue項目加入百度統(tǒng)計的代碼與實現(xiàn)，自己探索出了一套加入百度統(tǒng)計的辦法，下面這篇文章主要給大家介紹了關(guān)于單頁面vue引入百度統(tǒng)計的使用方法，需要的朋友可以參考下2018-10-10
vue中v-cloak解決刷新或者加載出現(xiàn)閃爍問題（顯示變量）
這篇文章主要介紹了vue中v-cloak解決刷新或者加載出現(xiàn)閃爍問題（顯示變量） ,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細(xì)介紹了Vue動態(tài)實現(xiàn)評分效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05