Vue.js每天必學(xué)之過(guò)濾器與自定義過(guò)濾器
基礎(chǔ)
類似于自定義指令，可以用全局方法 Vue.filter() 注冊(cè)一個(gè)自定義過(guò)濾器，它接收兩個(gè)參數(shù)：過(guò)濾器 ID 和過(guò)濾器函數(shù)。過(guò)濾器函數(shù)以值為參數(shù)，返回轉(zhuǎn)換后的值：
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
<!-- 'abc' => 'cba' --> <span v-text="message | reverse"></span>
過(guò)濾器函數(shù)可以接收任意數(shù)量的參數(shù)：
Vue.filter('wrap', function (value, begin, end) {
return begin + value + end
})
<!-- 'hello' => 'before hello after' --> <span v-text="message | wrap 'before' 'after'"></span>
雙向過(guò)濾器
目前我們使用過(guò)濾器都是在把來(lái)自模型的值顯示在視圖之前轉(zhuǎn)換它。不過(guò)也可以定義一個(gè)過(guò)濾器，在把來(lái)自視圖（<input> 元素）的值寫回模型之前轉(zhuǎn)化它：
Vue.filter('currencyDisplay', {
// model -> view
// 在更新 `<input>` 元素之前格式化值
read: function(val) {
return '$'+val.toFixed(2)
},
// view -> model
// 在寫回?cái)?shù)據(jù)之前格式化值
write: function(val, oldVal) {
var number = +val.replace(/[^\d.]/g, '')
return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
}
})
動(dòng)態(tài)參數(shù)
如果過(guò)濾器參數(shù)沒(méi)有用引號(hào)包起來(lái)，則它會(huì)在當(dāng)前 vm 作用域內(nèi)動(dòng)態(tài)計(jì)算。另外，過(guò)濾器函數(shù)的 this 始終指向調(diào)用它的 vm。例如：
<input v-model="userInput">
<span>{{msg | concat userInput}}</span>
Vue.filter('concat', function (value, input) {
// `input` === `this.userInput`
return value + input
})
上例比較簡(jiǎn)單，也可以用表達(dá)式達(dá)到相同的結(jié)果，但是對(duì)于更復(fù)雜的邏輯——需要多于一個(gè)語(yǔ)句，這時(shí)需要將它放到計(jì)算屬性或自定義過(guò)濾器中。
內(nèi)置過(guò)濾器 filterBy 和 orderBy，根據(jù)所屬 Vue 實(shí)例的當(dāng)前狀態(tài)，過(guò)濾/排序傳入的數(shù)組。
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)右鍵彈出菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式
這篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
詳解如何在vue項(xiàng)目中使用layui框架及采坑
這篇文章主要介紹了vue使用layui框架，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue3如何獲取proxy對(duì)象的值而不是引用的方式
這篇文章主要介紹了Vue3如何獲取proxy對(duì)象的值而不是引用的方式,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10
vue echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)展示
這篇文章主要為大家詳細(xì)介紹了vue echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue的異步更新實(shí)現(xiàn)原理，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
在本篇文章里小編給各位分享的是關(guān)于Vue發(fā)布項(xiàng)目的實(shí)例內(nèi)容以及知識(shí)點(diǎn)講解，需要的朋友們參考下。2019-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)二級(jí)彈框案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了Vue自定義部分頁(yè)面顯示導(dǎo)航欄,在設(shè)計(jì)導(dǎo)航欄的時(shí)候，考慮到登錄之前不能瀏覽該網(wǎng)站，所以需要在登錄頁(yè)和注冊(cè)頁(yè)不能出現(xiàn)導(dǎo)航欄，登錄后的頁(yè)面才能出現(xiàn)導(dǎo)航欄，本文給大家解決這個(gè)問(wèn)題，感興趣的朋友跟隨小編一起看看吧2022-10-10
這篇文章主要介紹了Vue之封裝公用變量以及實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07