vue–過濾器(私有，全局)
- 2019 年 12 月 16 日
- 筆記
過濾器
概念：Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由「管道」符指示；
私有過濾器
- HTML元素：
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <p>{{ msg | msgFormat('瘋狂+1', '123') | test }}</p> </div> <script> // 定義一個 Vue 全局的過濾器，名字叫做 msgFormat Vue.filter('msgFormat', function (msg, arg, arg2) { // 字符串的 replace 方法，第一個參數，除了可寫一個 字符串之外，還可以定義一個正則 return msg.replace(/單純/g, arg + arg2) }) Vue.filter('test', function (msg) { return msg + '========' }) // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '曾經，我也是一個單純的少年，單純的我，傻傻的問，誰是世界上最單純的男人' }, methods: {} }); </script> </body> </html>
- 私有
filters定義方式：
filters: { // 私有局部過濾器，只能在 當前 VM 對象所控制的 View 區域進行使用 dataFormat(input, pattern = "") { // 在參數列表中 通過 pattern="" 來指定形參默認值，防止報錯 var dt = new Date(input); // 獲取年月日 var y = dt.getFullYear(); var m = (dt.getMonth() + 1).toString().padStart(2, '0'); var d = dt.getDate().toString().padStart(2, '0'); // 如果 傳遞進來的字符串類型，轉為小寫之後，等於 yyyy-mm-dd，那麼就返回 年-月-日 // 否則，就返回 年-月-日 時：分：秒 if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { // 獲取時分秒 var hh = dt.getHours().toString().padStart(2, '0'); var mm = dt.getMinutes().toString().padStart(2, '0'); var ss = dt.getSeconds().toString().padStart(2, '0'); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } } }
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')來填充字符串；
全局過濾器
// 定義一個全局過濾器 Vue.filter('dataFormat', function (input, pattern = '') { var dt = new Date(input); // 獲取年月日 var y = dt.getFullYear(); var m = (dt.getMonth() + 1).toString().padStart(2, '0'); var d = dt.getDate().toString().padStart(2, '0'); // 如果 傳遞進來的字符串類型，轉為小寫之後，等於 yyyy-mm-dd，那麼就返回 年-月-日 // 否則，就返回 年-月-日 時：分：秒 if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { // 獲取時分秒 var hh = dt.getHours().toString().padStart(2, '0'); var mm = dt.getMinutes().toString().padStart(2, '0'); var ss = dt.getSeconds().toString().padStart(2, '0'); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } });
注意：當有局部和全局兩個名稱相同的過濾器時候，會以就近原則進行調用，即：局部過濾器優先於全局過濾器被調用！
