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

在前后端分離的項(xiàng)目中，經(jīng)常會(huì)有后臺(tái)返回的數(shù)據(jù)需要經(jīng)過(guò)處理才能顯示到頁(yè)面上的場(chǎng)景。

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

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

一、定義/封裝過(guò)濾器

在 src目錄 下新建 filters目錄 用來(lái)專(zhuān)門(mén)存放全局過(guò)濾器，如果項(xiàng)目的過(guò)濾器過(guò)多，那么就要按類(lèi)型分類(lèi)。如果項(xiàng)目需要前臺(tái)處理的數(shù)據(jù)不是太多，那么就在 filters目錄 下新建一個(gè) index.js 來(lái)存放所有的過(guò)濾器就足夠了。

index.js代碼如下：

// 封裝過(guò)濾器// 過(guò)濾器的聲明可以有下列多種寫(xiě)法/** * 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};

二、注冊(cè)過(guò)濾器

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

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

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

在組件中使用：

<template> <div class='home'> <img alt='Vue logo' src='http://m.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>

四、效果

五、可能的報(bào)錯(cuò)與注意點(diǎn)

在 main.js 中，要先定義過(guò)濾器, 再新建 vue 實(shí)例，否則會(huì)報(bào)Failed to resolve filter: xxx的錯(cuò)誤。

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