19-Vue自定義全局過濾器

http://www.runoob.com/js/js-regexp.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/管道操作符
https://www.jianshu.com/p/07913e898054

一.重點

1.管道函數
試驗性的管道操作符 |> (目前在 stage 1階段)允許以一種易讀的方式去對函數鏈式調用。本質上來說,管道操作符是單參數函數調用的語法糖,它允許你以'%21' |> decodeURI來替代decodeURI('%21')。
--------MDN
管道機制一開始是UNIX中出現的,一個程序的輸出直接成爲下一個程序的輸入,就像水流過管道一樣方便(類似於函數式編程中的filter或者一切皆對象的鏈式操作),而且多個單一功能的函數通過管道組合成複合函數(UNIX的“KISS”原則)。
-------@ArimaKisho
簡單的說,就是將上一個函數的輸出,作爲下一個函數的輸入
2.正則表達式
正則表達式(英語:Regular Expression,在代碼中常簡寫爲regex、regexp或RE)使用單個字符串來描述、匹配一系列符合某個句法規則的字符串搜索模式。
搜索模式可用於文本搜索和文本替換。
------菜鳥教程
簡單的說,就是利用字符串匹配具有某一規則的所有字符串
格式:
/正則表達式主體/修飾符(可選)
實例:
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","Runoob");


二.助記圖

1.問題
對於在界面上顯示的某些數據,我們希望它符合某種規範,比如替換敏感詞
2.解決方法
引入過濾器的概念:
Vue.js允許你自定義過濾器,用於一些常見的文本格式化.
3.過濾器適用範圍
雙花括號插值和v-bind表達式
4.自定義全局過濾器的格式
Vue.filter("過濾器名稱",function(value){return value.replace(/學院/g,"大學")})
5.適用過濾器
{{需要過濾的數據 | 過濾器的名稱}}
默認情況下,會將|前面的數據傳遞給方法
默認情況下,插入值和綁定值都會適用過濾器過濾之後的數據來填充內容
6.注意
過濾器可以連續使用(管道函數)
{{msg | msgFormat1 | msgFormat2}}
7.代碼驗證


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章