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