Vue的filters(本地)或filter(全域性)過濾常用資料型別解析

2022-07-27 14:01:23

filters(本地)或filter(全域性)過濾常用資料型別

情況一：後臺給的日期是Sat Jul 31 2021 21:50:01 GMT+0800 (中國標準時間)，如果直接呈現給使用者，他們一定會吐槽你不說人話~~~

情況二：後臺給的百分數是小數沒有轉化成00%格式

採用vue的過濾機制就可以解決這種情況，有兩種方式：

第一種：全域性寫法，在main.js裡面加入

// 【全域性過濾】----------------------------------------
 
//轉換情況一的日期
Vue.filter('yyyy_MM_dd', v => {
    if (v) return new Date(v)
        .toLocaleString("zh-Hans-CN", {
            year: "numeric",
            month: "2-digit",
            day: "2-digit",
        }).replace(///g, "-");
    else return '';
});
 
//轉換情況二的百分數
Vue.filter('percent', v => {
    if (v) return  Math.abs(v.toFixed(2)) + "%";
    else return 0;
});

第二種：本地寫法，在vue檔案頁面的<script></script>裡面加入

  filters: {
    //轉換情況一的日期
    yyyy_MM_dd: (v) => {
      if (v)
        return new Date(v)
          .toLocaleString("zh-Hans-CN", {
            year: "numeric",
            month: "2-digit",
            day: "2-digit",
          })
          .replace(///g, "-");
      else return "";
    },
 
    //轉換情況二的百分數
    percent: (v) => {
      if (v) return Math.abs(v.toFixed(2)) + "%";
      else return 0;
    },
  },

然後在繫結對應資料的地方用豎線“|”跟上對應的過濾方法就可以了

{{ 日期 | yyyy_MM_dd }}
{{ 小數 | percent }}
 
 
/*額外知識：
過濾器還支援串聯，也就是多個 | filterName | filterName | ... 這樣可以綜合在一起使用多個過濾功能。
過濾器是 JavaScript 函數，因此可以接收引數：
{{ string | filter('引數1', 引數2) }}
這裡，filter被定義為接收三個引數的過濾器函數。其中 string 的值作為第一個引數，普通字串 '引數1' 作為第二個引數，表示式 引數2 的值作為第三個引數。
*/

Vue 全域性常用的過濾方法

全域性引入filter：把寫了方法的js檔案映入進main.js：import ‘./utils/filter’

1.將整數部分逢三一斷

例如：12345600 過濾為 12，345，600

Vue.filter('NumberFormat', function(value) {
  if (!value) {
    return '0'
  }
  const intPartFormat = value.toString().replace(/(d)(?=(?:d{3})+$)/g, '$1,') // 將整數部分逢三一斷
  return intPartFormat
})

2.將資料格式化為金額

2.1有根據正則格式化

例如 123456 過濾為 123,456.00

Vue.filter('MoneyFormat', function(number, decimals, symbol) {
    if (!decimals) {
      decimals = 2
    }
    if (!symbol) {
      symbol = ''
    }
    const decPoint = '.'
    const thousandsSep = ','
    number = (number + '').replace(/[^0-9+-Ee.]/g, '')
    const n = !isFinite(+number) ? 0 : +number
    const prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
    const sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep
    const dec = (typeof decPoint === 'undefined') ? '.' : decPoint
    let s = ''
    const toFixedFix = function(n, prec) {
      const k = Math.pow(10, prec)
      return '' + numMulti (n, k) / k
    }
    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
    const re = /(-?d+)(d{3})/
    while (re.test(s[0])) {
      s[0] = s[0].replace(re, '$1' + sep + '$2')
    }
    if ((s[1] || '').length < prec) {
      s[1] = s[1] || ''
      s[1] += new Array(prec - s[1].length + 1).join('0')
    }
  
    return symbol + s.join(dec)
  })

上面過濾為金額的方法需要處理精度丟失問題，引入其它檔案該numMulti方法如下：

/**
* 乘法運算，避免資料相乘小數點後產生多位數和計算精度損失。
*
* @param num1被乘數 | num2乘數
*/
export function numMulti (num1, num2) {
  num1 = num1 || 0
  num2 = num2 || 0
   let baseNum = 0
   try {
       baseNum += num1.toString().split('.')[1].length
   } catch (e) {
   }
   try {
       baseNum += num2.toString().split('.')[1].length
   } catch (e) {
   }
   return Number(num1.toString().replace('.', '')) * Number(num2.toString().replace('.', '')) / Math.pow(10, baseNum)
}

2.2.格式化貨幣

我經常需要格式化貨幣，它需要遵循以下規則：

123456789 => 123,456,789
123456789.123 => 123,456,789.123

const formatMoney = (money) => {
  return money.replace(new RegExp(`(?!^)(?=(\d{3})+${money.includes('.') ? '\.' : '$'})`, 'g'), ',')  
}
formatMoney('123456789') // '123,456,789'
formatMoney('123456789.123') // '123,456,789.123'
formatMoney('123') // '123'

3.展示時,字數超出10個字的後面省略

用…展示代替：

  filters: {
    itemDescFilter: function (value) {
      if (!value) {
        return ''
      }
      value = value.toString()
      if (value.length <= 10) {
        return value
      } else {
        return value.substr(0, 10) + ' . . .'
      }
    }
  },

效果如下:

4.格式化日期為YYYY-MM-DD

建立filters.js檔案並安裝、匯入moment改檔案，把filters匯入到main.js中全域性使用，

全域性過濾器，格式化日期為YYYY-MM-DD / 格式化日期為YYYY-MM-DD HH:mm:ss

Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD') {
  return moment(dataStr).format(pattern)
})

如下，完成資料格式化，例如其中的text為2022-04-02 11:11:11，經過改過濾器後展示的資料為2022-04-02

5.格式化日期為YYYY-MM-DD HH:mm:ss

Vue.filter('moment', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dataStr).format(pattern)
})
具體使用同第4點

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。