Vue 過濾器的使用

Vue官方文檔是這樣說的：Vue過濾器用於格式化一些常見的文本。

在實際項目中的使用：

1. 定義過濾器
   1. 在src定義一個filter.js文件，裏面定義過濾器函數，在最後要使用 exprot default 將定義的函數暴露出來 //將時間戳轉化爲日期格式 function formatDate (value, fmt='') { let date = new Date(value) if (fmt=='') fmt = 'Y-MM-dd hh:mm' let o = { 'Y+':date.getFullYear(), 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds() }; for (let k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + ''; fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); } } return fmt; }; function padLeftZero (str) { return ('00' + str).substr(str.length); }; //將數字格式化爲容易查看的格式 function formatNumber(num){ if (num>= 1000000) { return (num/1000000).toFixed(1).replace(/.0$/, '') + 'w'; } if (num>= 1000) { return (num/1000).toFixed(1).replace(/.0$/, '') + 'k'; } return num; } //暴露函數 export default { formatDate, formatNumber }
2. 註冊過濾器 在main.js中引入剛剛定義的文件，然後在初始化Vue實例之前加上註冊過濾器的語句 Object.keys(filter).forEach(key=>{ Vue.filter(key,filter[key]) })
3. 使用過濾器 使用的時候只需要在{{}} 中想要格式化的變量 後面加上 | ，然後跟上自己定義的過濾器函數的名稱，比如：fun_test 即可，該函數默認會接受一個參數，及 | 前的那個值，如果還需要往該函數中傳入其他參數，可以這樣 | fun_test(param1,param2,...)