溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
寫項目的時候，有一些方法我們是需要全局使用的，比如數字的四色五入保留小數點啊、一些工具方法、字符的格式化啊等等。這些很多頁面需要用的、使用頻率極高的方法，我們一般會將其封裝為全局的方法；我以前是這樣做的，有這么幾種方式：
1、掛載到vue.prototype
在main.js入口文件中掛載到vue.prototype，如我們封裝一個獲取時間戳的函數。
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的全局注入規則大家應該都懂，如果組件中沒有這個getTime方法，那么就會在頁面中注入這個方法。
Vue.mixin({
data() {},
methods: {
getTime() {
return new Date().getTime();
}
}
});
new App({
el: '#app'
// ...
});
3、關于vue.filters
（1）問題
前面兩種方法弊端有很多，比如一般將全局變量掛載到prototype總是不太好的，狀態管理我們用vuex；第二個全局混入的話，子組件中也會混入這些方法等等；最大的弊端就是代碼的可讀性和維護問題，如果項目體積大了，復用的方法多了，總不能都掛到prototye上去對吧？
這個時候，vue.filters過濾器就能夠較好的解決這個問題。
（2）使用
先看一波官網-->傳送門
ok，看完了，基本了解了過濾器的概念和基本使用方式以后，我們具體到項目中的使用。
新建一個filters文件夾，丟一行代碼（很常用的一行代碼，就是對數字做一些四舍五入的處理）
數字四舍五入保留兩位小數點
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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
