Vue中過濾器定義以及使用方法實例
介紹
過濾器實質(zhì)不改變原始數(shù)據(jù)，只是對數(shù)據(jù)進行加工處理后返回過濾后的數(shù)據(jù)再進行調(diào)用處理。我們看一下官方的定義：
Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式 (后者從 2.1.0+ 開始支持)。過濾器應(yīng)該被添加在 JavaScript 表達式的尾部，由“管道”符號指示:
<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>Vue中過濾器如何使用
組件內(nèi)過濾器
注意：過濾器函數(shù)接收的第一個值是message，依次是傳的值。
過濾器是可以疊加的，后面過濾器接收前面過濾器的返回值。
如這段代碼：
<div id="app">
<div v-bind:id="message|capitalize('a','b')|gl"></div>
</div>它的過濾器 capitalize的第一個參數(shù)是message，第二個第三個參數(shù)是字符串a(chǎn)和b
在組件的選項中定義
filters:{
capitalize:function(value,x,y){
return value+x+y;
},
gl:function(value){
value=value.toString();
return value.toUpperCase();
}
}全局過濾器
全局過濾器使用：Vue.filter( filterName，( )=>{ return // 數(shù)據(jù)處理結(jié)果 } )
- 參數(shù)一：是過濾器的名字，也就是管道符后邊的處理函數(shù)；
- 參數(shù)二：處理函數(shù)，處理函數(shù)的參數(shù)同局部過濾器（組件內(nèi)過濾器）一樣
注意：當全局過濾器和局部過濾器重名時，會采用局部過濾器
全局定義
Vue.filter("addPriceIcon",function(value){
console.log(value)//200
return '￥' + value
})
new Vue({
...
})或者
// 實現(xiàn)一個給所有數(shù)字小數(shù)部分都變成兩位，沒有后補零
export const yuan = value =>
value
? (value / 100).toFixed(2)
: value;
export default {
install(Vue) {
Vue.filter('yuan', yuan);
}
};在main.js里引入
import filters from '@/filter'; Vue.use(filters);
可以在任意組件內(nèi)使用只能是在v-bind或者雙花括號插值里用
<!-- 在雙花括號中 -->
{{ message | yuan}}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | yuan"></div>補充：vue中的過濾器可以格式化以及美化內(nèi)容
從后臺接受數(shù)據(jù)過來的時候時間是時間毫秒，我選擇了使用過濾器，接下來給大家分享一下使用過程
1.在全局配置過濾器 main.js文件里面
代碼：
// 時間過濾器
Vue.filter('dateFilter', function (val) {
const time = new Date(val)
const y = time.getFullYear()
const m = (time.getMonth() + 1 + '').padStart(2, '0')
const d = (time.getDate() + '').padStart(2, '0')
const hh = (time.getHours() + '').padStart(2, '0')
const mm = (time.getMinutes() + '').padStart(2, '0')
const ss = (time.getSeconds() + '').padStart(2, '0')
return y + '年' + m + '月' + d + '日' + '' + hh + ':' + mm + ':' + ss
})截圖：
2.使用過濾器 在需要的組件使用
代碼：
{{essayData.times | dateFilter}} //dateFileter是過濾器名 essayData是需要過濾的數(shù)據(jù)總結(jié)
vue中過濾器的作用可被用于一些常見的文本格式化。（也就是修飾文本，但是文本內(nèi)容不會改變）
過濾器分全局過濾器和局部過濾器，全局過濾器在項目中使用頻率很高，要掌握
過濾器可以用在兩個地方：雙花括號插值 或 v-bind表達式。
到此這篇關(guān)于Vue中過濾器定義以及使用方法的文章就介紹到這了,更多相關(guān)Vue過濾器定義使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了element表單校驗提示定位到元素位置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了詳解vantUI框架在vue項目中的應(yīng)用踩坑,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Vue異步更新DOM及$nextTick執(zhí)行機制解讀
這篇文章主要介紹了Vue異步更新DOM及$nextTick執(zhí)行機制解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本篇文章主要介紹了Vuex之理解Mutations的用法實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了vue 配置多頁面應(yīng)用的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
定時器如果不及時合理地清除，會造成業(yè)務(wù)邏輯混亂甚至應(yīng)用卡死的情況，這個時就需要清除定時器，本文就介紹了Vue如何優(yōu)雅的清除定時器，感興趣的可以了解一下2021-07-07
解決axios:"timeout of 5000ms exceeded"
這篇文章主要介紹了解決axios:"timeout of 5000ms exceeded"超時的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
今天小編就為大家分享一篇關(guān)于VUE引入第三方j(luò)s包及調(diào)用方法講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03
這篇文章主要介紹了Vue實現(xiàn)拖拽穿梭框功能四種方式,使用原生js實現(xiàn)拖拽，VUe使用js實現(xiàn)拖拽穿梭框，結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
最近在學習vue,發(fā)現(xiàn)了vue的好多坑,下面這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)登錄記住賬號密碼功能的思路與過程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2021-11-11