過濾器vue.filters的使用方法實(shí)現(xiàn)
寫項(xiàng)目的時(shí)候，有一些方法我們是需要全局使用的，比如數(shù)字的四色五入保留小數(shù)點(diǎn)啊、一些工具方法、字符的格式化啊等等。這些很多頁面需要用的、使用頻率極高的方法，我們一般會(huì)將其封裝為全局的方法；我以前是這樣做的，有這么幾種方式：
1、掛載到vue.prototype
在main.js入口文件中掛載到vue.prototype，如我們封裝一個(gè)獲取時(shí)間戳的函數(shù)。
Vue.prototype.now = Date.now || function () {
return new Date().getTime();
};
然后就可以在.vue頁面中使用了
<script>
export default {
mounted(){
console.log('now:' + this.now());
},
}
</script>
2、全局混入mixins
同樣也還是在main.js中。
mixins的全局注入規(guī)則大家應(yīng)該都懂，如果組件中沒有這個(gè)getTime方法，那么就會(huì)在頁面中注入這個(gè)方法。
Vue.mixin({
data() {},
methods: {
getTime() {
return new Date().getTime();
}
}
});
new App({
el: '#app'
// ...
});
3、關(guān)于vue.filters
（1）問題
前面兩種方法弊端有很多，比如一般將全局變量掛載到prototype總是不太好的，狀態(tài)管理我們用vuex；第二個(gè)全局混入的話，子組件中也會(huì)混入這些方法等等；最大的弊端就是代碼的可讀性和維護(hù)問題，如果項(xiàng)目體積大了，復(fù)用的方法多了，總不能都掛到prototye上去對(duì)吧？
這個(gè)時(shí)候，vue.filters過濾器就能夠較好的解決這個(gè)問題。
（2）使用
先看一波官網(wǎng)-->傳送門
ok，看完了，基本了解了過濾器的概念和基本使用方式以后，我們具體到項(xiàng)目中的使用。
新建一個(gè)filters文件夾，丟一行代碼（很常用的一行代碼，就是對(duì)數(shù)字做一些四舍五入的處理）
數(shù)字四舍五入保留兩位小數(shù)點(diǎn)
main.js中引入
// global filters
import Vue from 'vue';
import * as filters from '@/filters';
Object.keys(filters).forEach((key) => {
Vue.filter(key, filters[key]);
});
然后頁面中就可以使用了
<div>{{num | formatAmountFixed2}}</div>
<script>
data(){
return {
num: 11111
}
}
</script>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談vue.use()方法從源碼到使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
手寫Vue內(nèi)置組件component的實(shí)現(xiàn)示例
本文主要介紹了手寫Vue內(nèi)置組件component的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了vue中實(shí)現(xiàn)checkbox回顯效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了Vue.js之render函數(shù)使用詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue實(shí)現(xiàn)數(shù)字+英文字母組合鍵盤功能
這篇文章主要介紹了vue實(shí)現(xiàn)數(shù)字+英文字母組合鍵盤功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue3中展示markdown格式文章的三種形式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
Vue 電商后臺(tái)管理項(xiàng)目階段性總結(jié)(推薦)
這篇文章主要介紹了Vue 電商后臺(tái)管理項(xiàng)目階段性總結(jié)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08
這篇文章主要介紹了vue cli 3.0 搭建項(xiàng)目的圖文教程，本文通過圖片文字相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
在Vue進(jìn)行前端開發(fā)中事件處理是必不可少的功能,下面這篇文章主要給大家介紹了關(guān)于VUE事件處理之@click用法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
vue store之狀態(tài)管理模式的詳細(xì)介紹
這篇文章主要介紹了vue store之狀態(tài)管理模式的詳細(xì)介紹，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06