（PS：本文代碼在vue-cli3構(gòu)建的基礎(chǔ)vue項目之上進(jìn)行編寫：vue create my-project）

在前后端分離的項目中，經(jīng)常會有后臺返回的數(shù)據(jù)需要經(jīng)過處理才能顯示到頁面上的場景。

使用最多的場景就是日期/時間、數(shù)字、字符串的格式化處理，實際業(yè)務(wù)中可能還有更復(fù)雜的數(shù)據(jù)處理邏輯。

下面就拿封裝全局的處理數(shù)字和字符串的 filter 來展示 vue 如何 封裝全局filter 并統(tǒng)一處理。

一、定義/封裝過濾器

在 src目錄 下新建 filters目錄 用來專門存放全局過濾器，如果項目的過濾器過多，那么就要按類型分類。如果項目需要前臺處理的數(shù)據(jù)不是太多，那么就在 filters目錄 下新建一個 index.js 來存放所有的過濾器就足夠了。

index.js代碼如下：

// 封裝過濾器// 過濾器的聲明可以有下列多種寫法/** * Number formatting by unit * like 10000 => 10k * @param {number} num * @param {number} digits * @return {string} */function numberFormatter(num, digits) { const si = [ { value: 1e18, symbol: 'E' }, { value: 1e15, symbol: 'P' }, { value: 1e12, symbol: 'T' }, { value: 1e9, symbol: 'G' }, { value: 1e6, symbol: 'M' }, { value: 1e3, symbol: 'k' } ]; for (let i = 0; i < si.length; i++) { if (num >= si[i].value) { return (num / si[i].value + 0.1).toFixed(digits).replace(/.0+$|(.[0-9]*[1-9])0+$/, ’$1’) + si[i].symbol } } return num.toString();}/** * Number formatting by thousand * like 10000 => '10,000' * @param {number} num * @return {string} */const toThousandFilter = function(num) { return (+num || 0).toString().replace(/^-?d+/g, m => m.replace(/(?=(?!b)(d{3})+$)/g, ’,’))};/** * Upper case first char * like 'wenyuan' => 'Wenyuan' * @param {string} string * @return {string} */const uppercaseFirst = string => { return string.charAt(0).toUpperCase() + string.slice(1);};export default { numberFormatter, toThousandFilter, uppercaseFirst};

二、注冊過濾器

然后在 main.js 中引入注冊即可使用：

import filters from './filters'; // global filters// register global utility filtersObject.keys(filters).forEach(key => { Vue.filter(key, filters[key]);});

三、在組件內(nèi)使用寫好的過濾器

在組件中使用：

<template> <div class='home'> <img alt='Vue logo' src='http://www.baoyu77737.com/assets/logo.png'/> <h1>score：{{ score | numberFormatter }}</h1> <h1>score：{{ score | toThousandFilter }}</h1> <h1>username：{{ username | uppercaseFirst }}</h1> </div></template><script>export default { name: 'home', components: {}, data() { return { score: 1200000, username: 'wenyuan' }; }};</script>

四、效果

五、可能的報錯與注意點

在 main.js 中，要先定義過濾器, 再新建 vue 實例，否則會報Failed to resolve filter: xxx的錯誤。

以上就是Vue封裝全局過濾器Filters的步驟的詳細(xì)內(nèi)容，更多關(guān)于vue封裝過濾器的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！