Vue.js: Filter 过滤器

全局

<template>
  <div class="hello">
    <div id="app">
      <div>${{ msg | prompt("Peter", "Hello World!") }}</div>
      <div>{{ price | MoneyFormat }}</div>
      {{date|timeFormat('yyyy-mm-dd')}}
    </div>
  </div>
</template>
<script>
export default {
  name: "ceShi",
  data() {
    return {
      price: 88888888,
      date:new Date()
    };
  },
};
</script>

main.js

Vue.filter('prompt', function(value, arg1, arg2) {
  return value + ' ' + arg1 + ', ' + arg2;
});
Vue.filter('MoneyFormat', function(money) {
  if (money && money != null) {
    money = String(money);
    var left = money.split('.')[0], right = money.split('.')[1];
    right = right ? (right.length >= 2 ? '.' + right.substr(0, 2) : '.' + right + '0') : '.00';
    var temp = left.split('').reverse().join('').match(/(\d{1,3})/g);
    return (Number(money) < 0 ? '-' : '') + temp.join(',').split('').reverse().join('') + right;
  } else if (money === 0) { // 注意===在这里的使用，如果传入的money为0,if中会将其判定为boolean类型，故而要另外做===判断
    return '0.00';
  } else {
    return '';
  }
})

# OR
import filters from "./utlis/filters"
Object.keys(filters).forEach((key) => {
    Vue.filter(key, filters[key])
})

// filters.js
const prompt = (value, arg1, arg2) => {
    return value + ' ' + arg1 + ', ' + arg2;
}
/**
 * 过滤器千分位加两位小数
 * 格式：{{date| MoneyFormat}}
 */
const MoneyFormat = (money) => {
    if (money && money != null) {
        money = String(money);
        var left = money.split('.')[0],
            right = money.split('.')[1];
        right = right ? (right.length >= 2 ? '.' + right.substr(0, 2) : '.' + right + '0') : '.00';
        var temp = left.split('').reverse().join('').match(/(\d{1,3})/g);
        return (Number(money) < 0 ? '-' : '') + temp.join(',').split('').reverse().join('') + right;
    } else if (money === 0) { // 注意===在这里的使用，如果传入的money为0,if中会将其判定为boolean类型，故而要另外做===判断
        return '0.00';
    } else {
        return '';
    }
}
/**
 * 过滤器时间
 * 格式：{{date|timeFormat('yyyy-mm-dd')}}
 */
const timeFormat = (value, format) => {
    let date = new Date(value)
    let y = date.getFullYear()
    let m = date.getMonth() + 1
    let d = date.getDate()
    let h = date.getHours()
    let min = date.getMinutes()
    let s = date.getSeconds()
    let result = ''
    if (format === undefined) {
        result = `${y}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d} ${
        h < 10 ? '0' + h : h
      }:${min < 10 ? '0' + min : min}:${s < 10 ? '0' + s : s}`
    }
    if (format === 'yyyy-mm-dd') {
        result = `${y}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d}`
    }
    if (format === 'yyyy-mm') {
        result = `${y}-${m < 10 ? '0' + m : m}`
    }
    if (format === 'mm-dd') {
        result = ` ${m < 10 ? '0' + m : m}:${d < 10 ? '0' + d : d}`
    }
    if (format === 'hh:mm') {
        result = ` ${h < 10 ? '0' + h : h}:${min < 10 ? '0' + min : min}`
    }
    if (format === 'yyyy') {
        result = `${y}`
    }
    if (format === 'yyyy-mm-dd h:min:s') {
        result = `${y}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d} ${h < 10 ? '0' + h : h}:${min < 10 ? '0' + min : min}:${s < 10 ? '0' + s : s}`
    }
    if (format === 'yyyy.mm.dd') {
        result = `${y}.${m < 10 ? '0' + m : m}.${d < 10 ? '0' + d : d}`
    }
    return result
}
export default {
    prompt,
    MoneyFormat,
    timeFormat
}

组件内

<template>
  <div class="hello">
    <div id="app">
      <div>${{ price | commaFormat| priceFormat }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ceShi",
  filters:{
    priceFormat: function (value)  {
      // 加上 $ 字號
      return "$" + value;
    },
    commaFormat:function (value) {
      // 加上千分位符號
      return value
        .toString()
        .replace(
          /^(-?\d+?)((?:\d{3})+)(?=\.\d+$|$)/,
          function (all, pre, groupOf3Digital) {
            return pre + groupOf3Digital.replace(/\d{3}/g, ",$&");
          }
        );
    },
  },
  data() {
    return {
      price: 88888888,
    };
  },
};
</script>