vue-cli 3 全局過濾器的實(shí)例代碼詳解

在vue1.x版本里是自帶里幾個(gè)基礎(chǔ)的過濾器的(雖然不怎么用到)。
到了vue2.x版本之后,內(nèi)置到幾個(gè)過濾器就被刪掉了,如果需要用到過濾器,就要開發(fā)者自己去定義。
可以把過濾器定義在某個(gè)組件內(nèi)部,但這樣就成了局部過濾器,在別的組件里是無法使用的。所以通常不會(huì)這么做。
也可以把過濾器寫在main.js里。但如果項(xiàng)目中存在多個(gè)過濾器,這會(huì)使main.js文件看上去很龐大,不便于后期維護(hù)。
所以通常會(huì)新建一個(gè)js文件,專門用來存放所有過濾器。最后再引到main.js中供全局使用。
1、創(chuàng)建 filters.js
首先新建一個(gè)filters.js文件。把這個(gè)文件放在 src/assets 里。

因?yàn)檫@里是用來存放靜態(tài)資源的。這個(gè)文件夾可以用來存放圖片、css和部分自定義的功能的js資源。如果需要更好的分類,可以在 assets 文件夾里再創(chuàng)建 js 、 css 、 img 等文件夾。
2、創(chuàng)建過濾器規(guī)則
這里我創(chuàng)建了3個(gè)過濾器
// 轉(zhuǎn)小寫
let lower = value => value.toLowerCase();
// 轉(zhuǎn)大寫
let upper = value => value.toUpperCase();
let currencyStyle = (value, style) => { // 貨幣格式
/**
* style:
* currency:貨幣
* number: 數(shù)字格式
*/
if(style == 'number') { // 數(shù)字格式
return parseFloat(value.replace(/[^\d\.-]/g, ""));
} else { // 貨幣格式, 并保留2位小數(shù)
var n = 2;
value = parseFloat((value + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
var l = value.split(".")[0].split("").reverse(),
r = value.split(".")[1];
var t = "";
for (var i = 0; i < l.length; i++) {
t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
}
return t.split("").reverse().join("") + "." + r;
}
}
export {
lower,
upper,
currencyStyle
}
3、在main.js里注冊(cè)全局過濾器
import Vue from 'vue'
import App from './App.vue'
import * as filters from './assets/filters'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
通過 forEach 循環(huán),把自定義功能分別注冊(cè)到過濾器里。
4、在組件里使用
<template>
<div id="app">
<p>{{ num1 | currencyStyle('currency') }}</p>
<p>{{ num2 | currencyStyle('number') }}</p>
<p>{{ msg1 | lower }}</p>
<p>{{ msg2 | upper }}</p>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
num1: 123456,
num2: '123,456',
msg1: 'ABC',
msg2: 'def'
}
}
}
</script>

總結(jié)
以上所述是小編給大家介紹的vue-cli 3 全局過濾器的實(shí)例代碼詳解,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
Vue頁面加載完成后如何自動(dòng)加載自定義函數(shù)
這篇文章主要介紹了Vue頁面加載完成后如何自動(dòng)加載自定義函數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
vue cli如何配置開發(fā)環(huán)境下的sourcemap
這篇文章主要介紹了vue cli如何配置開發(fā)環(huán)境下的sourcemap問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出導(dǎo)入實(shí)戰(zhàn)案例
我們經(jīng)常需要在Vue搭建的后臺(tái)管理系統(tǒng)里進(jìn)行數(shù)據(jù)導(dǎo)入導(dǎo)出等操作,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出導(dǎo)入實(shí)戰(zhàn)案例的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue中js判斷長(zhǎng)時(shí)間不操作界面自動(dòng)退出登錄(推薦)
這篇文章主要介紹了vue中js判斷長(zhǎng)時(shí)間不操作界面自動(dòng)退出登錄,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01

