VUE で一般的に使用されるフィルター メソッドの完全なコレクション (とても良い記事です。急いで収集しないでください。いいね + フォローしてください)

1. 日付の書式設定

date = '2022/03/03';
timestamp_1 = 1646298588; // 时间戳 单位秒
timestamp_2 = 1646298835000; // 时间戳 毫秒

{
   
   {date | formatDateTime('yyyy-MM-dd')}} // 2022-03-03
{
   
   {date | formatDateTime('yyyy年MM月dd日')}} // 2022年03月03日

// 单位秒的时间戳 * 1000 = 毫秒时间戳
{
   
   {timestamp_1 * 1000 | formatDateTime('yyyy年MM月dd日')}} // 2022年03月03日
{
   
   {timestamp_1 * 1000 | formatDateTime('yyyy-MM-dd hh:mm:ss')}} // 2022-03-03 17:09:48

{
   
   {timestamp_2 | formatDateTime('yyyy年MM月dd日')}} // 2022年03月03日
{
   
   {timestamp_2 | formatDateTime('yyyy-MM-dd hh:mm:ss')}} // 2022-03-03 17:13:55

{
   
   {timestamp_2 | formatDateTime('yyyy小MM中dd大')}} // 2022小03中03大

filters: {
    formatDateTime(time, fmt) {
        if (time == null || time === '') {
            return '暂无';
        }
        let date = new Date(time);
        return formatDate(date, fmt)
    },
}

/**
 * @param {date} date
 * @param {string} fmt
 * @return {string}
 */
export const formatDate = (date, fmt) => {
  var o = {
    'M+': date.getMonth() + 1, // 月份
    'd+': date.getDate(), // 日
    'h+': date.getHours(), // 小时
    'm+': date.getMinutes(), // 分
    's+': date.getSeconds(), // 秒
    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
    S: date.getMilliseconds() // 毫秒
  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(
      RegExp.$1,
      (date.getFullYear() + '').substr(4 - RegExp.$1.length)
    );
  }
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) {
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
      );
    }
  }
  return fmt;
};

2. 数値を区切ります。カンマを使用して 3 桁ごとに区切ります。

value_1 = 123456789.223
value_2 = 254

{
   
   {value_1 | toThousandFilter}} // 123,456,789.223
{
   
   {value_2 | toThousandFilter}} // 254

/**
 * @param {number} num
 * @return {string} 
 */
export function toThousandFilter(num) {
    if(!num){
        return '';
    }
    return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
}

3. 大文字と小文字の変換

{
   
   {'value' | textTransform(0)}} // Value 首字母大写
{
   
   {'value' | textTransform(1)}} // VALUE 全大写
{
   
   {'VALUE' | textTransform(2)}} // value 全小写

/**
 * @param {String} string
 * @param {number} type
 * @return {string}
 */
export function textTransform(string, type) {
    let json = '';
    switch(type){
        case 0:
        json = string.charAt(0).toUpperCase() + string.slice(1);
            break;
        case 1:
        json = string.toUpperCase();
            break;
        case 2:
        json = string.toLowerCase();
            break;
        default:
        json = string
    }
    return json
}

4. 数値フォーマット変換 1000=>1K 1000000 =>1M ...

{
   
   {1000 | numberFormatter(2)}} // 1K
{
   
   {1040 | numberFormatter(2)}} // 1.04K
{
   
   {1000000 | numberFormatter(2)}} // 1M
{
   
   {1060000 | numberFormatter(2)}} // 1.06M
{
   
   {1000000000 | numberFormatter(2)}} // 1G

/**
 * @param {number} num
 * @param {number} digits
 * @return {string}
 */
export function numberFormatter(num, digits) {
    const si = [
        { value: 1E18, symbol: 'E' },
        { value: 1E15, symbol: 'P' },
        { value: 1E12, symbol: 'T' },
        { value: 1E9, symbol: 'G' },
        { value: 1E6, symbol: 'M' },
        { value: 1E3, symbol: 'k' }
    ]
    for (let i = 0; i < si.length; i++) {
        if (num >= si[i].value) {
            return (num / si[i].value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
        }
    }
    return num.toString()
}

ブロガーはフィルター メソッドを更新し続けます。対処したいフィルターがある場合は、教えてください。ブロガーは、それを見たときにそれを分類します。