Vue 過濾器的使用

1. Vue官方文檔是這樣說的：Vue過濾器用於格式化一些常見的文本。
2. 在實際項目中的使用：
   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,...)

注：本文根據我的經驗所寫，如需轉載請註明出處：http://www.javashuo.com/article/p-hbxywnvr-hu.html