Vue.js過(guò)濾器filter的使用

概念:

  • Vue.js允許自定義過(guò)濾器瘪吏,可被用作一些常見(jiàn)的文本格式化癣防。
  • 過(guò)濾器可以用在兩個(gè)地方:mustache插值和v-bind表達(dá)式。
  • 過(guò)濾器應(yīng)該被添加在javaScript表達(dá)式的尾部掌眠,由“管道”符指示

filter的調(diào)用方式:

{{ name | nameope }}

全局filter的定義語(yǔ)法:

過(guò)濾器中的function蕾盯,第一個(gè)參數(shù)已經(jīng)被規(guī)定死了,永遠(yuǎn)都是過(guò)濾器管道符前面?zhèn)鬟f過(guò)來(lái)的數(shù)據(jù) 如下的name

Vue.filter( ' 過(guò)濾器名稱(chēng) ' , function (data) { } )

例:

<p>{{ name | nameShow }}</p>
Vue.filter( ' nameShow ' , function (data) { 
  return name + ' 123 '
} )

過(guò)濾器的傳參:

<p>{{ name | nameShow( ' msg' ) }}</p>
Vue.filter( ' nameShow ' , function (data,msg) { 
  return name + msg
} )

過(guò)濾器也可以串寫(xiě)多個(gè):

過(guò)濾器串寫(xiě)之后從前往后執(zhí)行 然后把結(jié)果顯示出來(lái)

<p>{{ name | nameShow( ' msg' ) | nameTest}}</p>
Vue.filter( ' nameShow ' , function (data,msg) { 
  return name + msg
} )
Vue.filter( ' nameTest ' , function (data) { 
  return name + 666
} )

定義私有過(guò)濾器

定義私有過(guò)濾器需要兩個(gè)條件: 過(guò)濾器名稱(chēng) 和 處理函數(shù)
在Vue實(shí)例中添加對(duì)象filters:{ },與data同級(jí),然后直接寫(xiě)處理函數(shù)就可以
如果私有過(guò)濾器和全局過(guò)濾器名稱(chēng)一致蓝丙,優(yōu)先調(diào)用私有過(guò)濾器

data:{},
mehods:{}
filters:{
  nameShow(){
    return name + ' 私有過(guò)濾器 '
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末级遭,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子渺尘,更是在濱河造成了極大的恐慌挫鸽,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件沧烈,死亡現(xiàn)場(chǎng)離奇詭異掠兄,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)蚂夕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)迅诬,“玉大人,你說(shuō)我怎么就攤上這事婿牍〕薮” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵等脂,是天一觀的道長(zhǎng)俏蛮。 經(jīng)常有香客問(wèn)我,道長(zhǎng)上遥,這世上最難降的妖魔是什么搏屑? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮粉楚,結(jié)果婚禮上辣恋,老公的妹妹穿的比我還像新娘。我一直安慰自己模软,他們只是感情好伟骨,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著燃异,像睡著了一般携狭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上回俐,一...
    開(kāi)封第一講書(shū)人閱讀 51,125評(píng)論 1 297
  • 那天逛腿,我揣著相機(jī)與錄音,去河邊找鬼鲫剿。 笑死鳄逾,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的灵莲。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼殴俱,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼政冻!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起线欲,我...
    開(kāi)封第一講書(shū)人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤明场,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后李丰,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體苦锨,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了舟舒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拉庶。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖秃励,靈堂內(nèi)的尸體忽然破棺而出氏仗,到底是詐尸還是另有隱情,我是刑警寧澤夺鲜,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布皆尔,位于F島的核電站,受9級(jí)特大地震影響币励,放射性物質(zhì)發(fā)生泄漏慷蠕。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一食呻、第九天 我趴在偏房一處隱蔽的房頂上張望流炕。 院中可真熱鬧,春花似錦搁进、人聲如沸浪感。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)影兽。三九已至,卻和暖如春莱革,著一層夾襖步出監(jiān)牢的瞬間峻堰,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來(lái)泰國(guó)打工盅视, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留捐名,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓闹击,卻偏偏與公主長(zhǎng)得像镶蹋,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子赏半,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容