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