Vue.js每天必學(xué)之過濾器與自定義過濾器
基礎(chǔ)
類似于自定義指令，可以用全局方法 Vue.filter() 注冊一個自定義過濾器，它接收兩個參數(shù)：過濾器 ID 和過濾器函數(shù)。過濾器函數(shù)以值為參數(shù)，返回轉(zhuǎn)換后的值：
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
<!-- 'abc' => 'cba' --> <span v-text="message | reverse"></span>
過濾器函數(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>
雙向過濾器
目前我們使用過濾器都是在把來自模型的值顯示在視圖之前轉(zhuǎn)換它。不過也可以定義一個過濾器，在把來自視圖（<input> 元素）的值寫回模型之前轉(zhuǎn)化它：
Vue.filter('currencyDisplay', {
// model -> view
// 在更新 `<input>` 元素之前格式化值
read: function(val) {
return '$'+val.toFixed(2)
},
// view -> model
// 在寫回數(shù)據(jù)之前格式化值
write: function(val, oldVal) {
var number = +val.replace(/[^\d.]/g, '')
return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
}
})
動態(tài)參數(shù)
如果過濾器參數(shù)沒有用引號包起來，則它會在當前 vm 作用域內(nèi)動態(tài)計算。另外，過濾器函數(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é)果，但是對于更復(fù)雜的邏輯——需要多于一個語句，這時需要將它放到計算屬性或自定義過濾器中。
內(nèi)置過濾器 filterBy 和 orderBy，根據(jù)所屬 Vue 實例的當前狀態(tài)，過濾/排序傳入的數(shù)組。
本文已被整理到了《Vue.js前端組件學(xué)習教程》，歡迎大家學(xué)習閱讀。
關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學(xué)習教程進行學(xué)習。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
axios 是一個基于promise用于瀏覽器和 nodejs 的 HTTP 客戶端，這篇文章主要介紹了Vue中axios的基本用法及axios的特征和使用注意細節(jié)，本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue3 表單搜索內(nèi)容回顯到地址欄的實例代碼,地址欄輸入內(nèi)容回顯到form表單,同理表單輸入內(nèi)容也要回顯到地址欄中,本文結(jié)合實例代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
vue3.2最新語法使用socket.io實現(xiàn)即時通訊詳解
這篇文章主要為大家介紹了vue3.2最新語法使用socket.io實現(xiàn)即時通訊詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
vue.js實現(xiàn)仿原生ios時間選擇組件實例代碼
本篇文章主要介紹了vue.js實現(xiàn)仿原生ios時間選擇組件實例代碼，具有一定的參考價值，有興趣的可以了解一下。2016-12-12
vue-cli3 打包優(yōu)化之 splitchunks詳解
這篇文章主要介紹了vue-cli3 打包優(yōu)化之 splitchunks的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue之項目中如何封裝loading加載效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了在vue路由上添加公共的路由前綴方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細介紹了vue車牌搜索組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
最近學(xué)習在vite項目中配置less,本文主要介紹了Vue3+Vite項目使用less的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2024-02-02
Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài)的操作代碼
這篇文章主要介紹了Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài),本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-02-02