vue項目全局過濾器與組件內(nèi)部過濾器 filter

全局過濾器

1.mian.js同級目錄下新建文件夾filter洞渤,文件夾下新建filter.js:

? let transformMobile=val=>{? ? //手機號碼隱藏中間4位

? ???? let mobile = val + '';

? ???? if (mobile && mobile.length === 11) {

? ? ???? const reg = /^(\d{3})\d{4}(\d{4})$/

? ? ???? return mobile.replace(reg, '$1****$2')

? ???? } else {

? ? ???? return val

? ???? }

? };

? export { transformMobile}

2.mian.js引入:

? import * as custom from './filter/filter';

? Object.keys(custom).forEach(key => {

? ? Vue.filter(key, custom[key])

? });

3.組件使用:

<div?@click.stop>

? ?<a?:href="'tel:'?+?mobile"> {{mobile|?transformMobile}} </a>

</div>

data(){

??????return{

????????mobile:?'13612345678',

??????}

????}

注:以上示例顯示結(jié)果: 136****5678

組件內(nèi)部過濾器

<template>

? ? <div><span>{{type?|?transformType(typeList)}}</span></div>

??</template>

<script>

??export?default?{

????data(){

??????return{

????????type:?1,

????????typeList:[????//接口獲取的類型列表

????????????{typeName:'中國郵政',?code:0},

????????????{typeName:'順豐快遞',?code:1},

????????????{typeName:'中通快遞',?code:2}

????????],

??????}

????},

????filters:?{

????????transformType(val,typeList){

????????????if(typeList.length>0){

????????????????for(let?i=0;?i<typeList.length;?i++){

????????????????????if?(typeList[i].code?==?val)?{

????????????????????????return??typeList[i].typeName;

????????????????????}

????????????????}

????????????}else?{

????????????????return?'未知'

????????????}

????????}

????},

??}

??</script>

注:以上示例顯示結(jié)果:?順豐快遞

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
禁止轉(zhuǎn)載悬赏,如需轉(zhuǎn)載請通過簡信或評論聯(lián)系作者筑凫。
  • 序言:七十年代末刹前,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子爸舒,更是在濱河造成了極大的恐慌浇雹,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件硅堆,死亡現(xiàn)場離奇詭異屿储,居然都是意外死亡,警方通過查閱死者的電腦和手機渐逃,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門够掠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人茄菊,你說我怎么就攤上這事疯潭∩蘅埃” “怎么了?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵竖哩,是天一觀的道長哭廉。 經(jīng)常有香客問我,道長相叁,這世上最難降的妖魔是什么遵绰? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮增淹,結(jié)果婚禮上椿访,老公的妹妹穿的比我還像新娘。我一直安慰自己虑润,他們只是感情好成玫,可當我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著端辱,像睡著了一般梁剔。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上舞蔽,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天荣病,我揣著相機與錄音,去河邊找鬼渗柿。 笑死个盆,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的朵栖。 我是一名探鬼主播颊亮,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼陨溅!你這毒婦竟也來了终惑?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤门扇,失蹤者是張志新(化名)和其女友劉穎雹有,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體臼寄,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡霸奕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了吉拳。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片质帅。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出煤惩,到底是詐尸還是另有隱情嫉嘀,我是刑警寧澤,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布盟庞,位于F島的核電站吃沪,受9級特大地震影響汤善,放射性物質(zhì)發(fā)生泄漏什猖。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一红淡、第九天 我趴在偏房一處隱蔽的房頂上張望不狮。 院中可真熱鬧,春花似錦在旱、人聲如沸摇零。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽驻仅。三九已至,卻和暖如春登渣,著一層夾襖步出監(jiān)牢的瞬間噪服,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工胜茧, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留粘优,地道東北人。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓呻顽,卻偏偏與公主長得像雹顺,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子廊遍,可洞房花燭夜當晚...
    茶點故事閱讀 43,452評論 2 348