過濾器vue.filters的使用方法實(shí)現(xiàn)

發(fā)布時(shí)間：2020-09-06 07:22:36 來源：腳本之家閱讀：217 作者：Ewall_ 欄目：web開發(fā)

寫項(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ù)字做一些四舍五入的處理）

過濾器vue.filters的使用方法實(shí)現(xiàn)

數(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í)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

過濾器vue.filters的使用方法實(shí)現(xiàn)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽