vue2.0 自定义过滤器（filter）实例

一、过滤器简介

（1）过滤器创建
　　过滤器的本质 是一个有参数 有返回值的方法

new Vue({
  filters:{
    myCurrency:function(myInput){
      return 处理后的数据
    }
  }
})

（2）过滤器使用
语法：

<any>{{表达式 | 过滤器}}</any>

举个例子：

<h1>{{price | myCurrency}}</h1>

（3）过滤器高级用法

在使用过滤器的时候，还可以指定参数，来告诉过滤器按照参数进行数据的过滤。

①如何给过滤器传参？

<h1>{{price | myCurrency('￥',true)}}</h1>

②如何在过滤器中接收到？

new Vue({
  filters:{
    //myInput是通过管道传来的数据
    //arg1在调用过滤器时在圆括号中第一个参数
    //arg2在调用过滤器时在圆括号中第二个参数
    myCurrency:function(myInput,arg1,arg2){
      return 处理后的数据
    }
  }
})

二、封装  自定义过滤器

filters.js

/**
 * 自定义过滤器
 */
import Vue from 'vue'

/**
 * 制保留2位小数
 * 例如：2，会在2后面补上00.即2.00
 */
Vue.filter('toDecimal2', x => {
  var f = parseFloat(x);
  if (isNaN(f)) {
    return false;
  }
  var f = Math.round(x * 100) / 100;
  var s = f.toString();
  var rs = s.indexOf('.');
  if (rs < 0) {
    rs = s.length;
    s += '.';
  }
  while (s.length <= rs + 2) {
    s += '0';
  }
  return s;
});

/**
 * 获取两位小数部分
 * 例如：11.05，返回 '05'
 * 如果是整数，返回 '00'
 */
Vue.filter('getDecimalPart', x => {
  var f = parseFloat(x);
  if (isNaN(f)) {
    return false;
  }
  var f = Math.round(x * 100) / 100;
  var s = f.toString();
  var rs = s.indexOf('.');
  if (rs < 0) {
    rs = s.length;
    s += '.';
  }
  while (s.length <= rs + 2) {
    s += '0';
  }
  return s.split(".")[1];
});

/**
 * 金额格式化
 * fmtMonty(2,'.', ',')后两个可省略
 */
Vue.filter('fmtMoney', (number, decimals, dec_point, thousnds_stp) => {
  /*
   * 参数说明：
   * number：要格式化的数字
   * decimals：保留几位小数
   * dec_point：小数点符号
   * thousands_sep：千分位符号
   * */
  number = (number + '').replace(/[^0-9+-Ee.]/g, '');
  var n = !isFinite(+number) ? 0 : +number,
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = (typeof thousnds_stp === 'undefined') ? ',' : thousnds_stp,
    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
    s = '',
    toFixedFix = function (n, prec) {
      var k = Math.pow(10, prec);
      return '' + Math.ceil(n * k) / k;
    }
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
  var 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 s.join(dec);

});

/**
 * 名字，身份证，银行卡，隐藏部分数字变‘*’号
 * plusXing(前面保留位数，后面保留位数）
 */
Vue.filter('plusXing', (str, frontLen, endLen) => {
  var len = str.length - frontLen - endLen;
  var xing = '';
  for (var i = 0; i < len; i++) {
    xing += '*';
  }
  return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
});

/**
 * 银行卡号四个数字分割
 */
Vue.filter('formartCode', n => {
  var b = parseInt(n).toString();
  var len = n.length;
  if (len <= 4) {
    return n;
  } else {
    var r = len % 4;
    return r > 0 ? b.slice(0, r) + "," + b.slice(r, len).match(/\d{4}/g).join(",") : b.slice(r, len).match(/\d{4}/g).join(" ");
  }
});

/**
 * 借款、还款完成过滤
 */
Vue.filter('complateState', n => {
  switch (n) {
    case 0:
      return '借款';
    case 1:
      return '还款';
    case 2:
      return '逾期记录'
  }
});

/**
 * 借款状态过滤器
 */
Vue.filter('borrowStateFilter', function (data) {
  switch (data) {
    case 'SETTING':
      return "审核中";
    case 'FAIL':
      return "放款失败";
    case 'NORM':
      return "使用中";
    case 'OVER':
      return "已逾期";
    case 'DELQ':
      return "已逾期";
    case 'OFFED':
      return "核销";
    case 'CLSDB':
      return "关闭";
    case 'SETL':
      return "已结清"
  }
});

/**
 * 还款状态过滤器
 */
Vue.filter('repaymentStateFilter', function (data) {
  switch (data) {
    case '00':
      return "还款成功";
    case '01':
      return "还款失败";
    case '02':
      return "还款中";
  }
});

/**
 * 银行小图标
 */
Vue.filter('bankLogoUrl', function (data) {
  var imgUrl = "static/img/";
  switch (data) {
    case '上海银行':
      return imgUrl + 'shbank.png';
    case '中信银行':
      return imgUrl + 'zxbank.png';
    case '中原银行':
      return imgUrl + 'zybank.jpeg';
    case '中国银行':
      return imgUrl + 'boc.png';
    case '中国建设':
      return imgUrl + 'ccb.png';
    case '交通银行':
      return imgUrl + 'jtbank.png';
    case '光大银行':
      return imgUrl + 'gdbank.png';
    case '兴业银行':
      return imgUrl + 'xybank.png';
    case '农业银行':
      return imgUrl + 'abc.png';
    case '工商银行':
      return imgUrl + 'icbc.png';
    case '平安银行':
      return imgUrl + 'pabank.png';
    case '广发银行':
      return imgUrl + 'gfbank.png';
    case '建设银行':
      return imgUrl + 'ccb.png';
    case '招商银行':
      return imgUrl + 'cmb.png';
    case '民生银行':
      return imgUrl + 'msbank.png';
    case '浦东发展':
      return imgUrl + 'pdbank.png';
    case '邮储银行':
      return imgUrl + 'ycbank.png';
    case '邮政储蓄':
      return imgUrl + 'ycbank.png';
  }
});

/**
 * (利息等的)费率
 */
Vue.filter('rate', function (data) {
  if (data) {
    data = data.toString();
    console.log(data);
    var intS = data.substring(0, data.indexOf('.')) + data.substring(data.indexOf('.') + 1, data.indexOf('.') + 3);
    var floatS = data.substring(data.indexOf('.') + 3, data.indexOf('.') + 7);
    while (floatS.length < 4) {
      floatS = floatS + '0';
    }
    return parseInt(intS) + '.' + floatS + '%';
  }
  return '';
});

/**
 * 时间过滤
 * fmtDate('yyyy,MM,dd')
 */
Vue.filter('fmtDate', (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;
  }
);

/**
 * 时间过滤
 * date:'yyyy-MM-dd'
 */
Vue.filter('fmtDateStr', (date) => {
  if(!date) return '';
  var temp = date.split(" ")[0].split("-");
  return temp.join("/");
});
Vue.filter('fmtDateStr2', (date) => {
  if(!date) return '';
  var temp = date.split(" ")[0].split("-");
  return temp[0] + "年" + temp[1] + "月" + temp[2] + "日";
});
Vue.filter('fmtTimeStr', (date) => {
  if(!date) return '';
  var temp = date.split(" ")[0].split("-");
  return temp.join("/") + " " + date.split(" ")[1];
});
Vue.filter('fmtTimeStr2', (date) => {
  if(!date) return '';
  var temp = date.split(" ")[0].split("-");
  return temp[0] + "年" + temp[1] + "月" + temp[2] + "日" + " " + date.split(" ")[1];
});

/**
 * 当前日期过滤器
 * new Date() --> ××年××月××日
 */
Vue.filter('fmtCurrentDate', (date) => {
  return date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';
});

/**
 * 当前时间过滤器
 * new Date() --> ××:××
 */
Vue.filter('fmtCurrentTime', (date) => {
  var minutes;
  if(date.getMinutes() < 10){
    minutes = '0' + date.getMinutes();
  }else{
    minutes = date.getMinutes();
  }
  return date.getHours() + ':' + minutes;
});

/**
 * 格式化时间为年、月、日、小时、分钟、刚刚
 */
Vue.filter('fmtDate2', (time) => {
  let oldDate = new Date(time)
  let newDate = new Date()
  var dayNum = "";
  var getTime = (newDate.getTime() - oldDate.getTime())/1000;

  if(getTime < 60*5){
    dayNum = "刚刚";
  }else if(getTime >= 60*5 && getTime < 60*60){
    dayNum = parseInt(getTime / 60) + "分钟前";
  }else if(getTime >= 3600 && getTime < 3600*24){
    dayNum = parseInt(getTime / 3600) + "小时前";
  }else if(getTime >= 3600 * 24 && getTime < 3600 * 24 * 30){
    dayNum = parseInt(getTime / 3600 / 24 ) + "天前";
  }else if(getTime >= 3600 * 24 * 30 && getTime < 3600 * 24 * 30 * 12){
    dayNum = parseInt(getTime / 3600 / 24 / 30 ) + "个月前";
  }else if(time >= 3600 * 24 * 30 * 12){
    dayNum = parseInt(getTime / 3600 / 24 / 30 / 12 ) + "年前";
  }

  // 位数为1,补全0
  function addZero(val){
    if(val < 10){
      val = '0' + String(val);
    }
    return val;
  }

  let year   = oldDate.getFullYear();
  let month  = oldDate.getMonth()+1;
  let day    = oldDate.getDate();
  let hour   = oldDate.getHours();
  let minute = oldDate.getMinutes();
  let second = oldDate.getSeconds();

  month = addZero(month);
  day = addZero(day);
  hour = addZero(hour);
  minute = addZero(minute);
  second = addZero(second);

  return dayNum+" "+year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
});

调用：

<!-- 自定义 过滤器 -->
<template>
  <div>
    <!-- 标题栏 -->
    <mt-header title="自定义过滤器">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <!-- 内容 -->
    <div class="cont">{{currentTime | fmtDate2}}</div>
  </div>
</template>

<script>
  export default {
    name: 'Filter',
    data(){
      return {
        currentTime: new Date()
      }
    }
  }
</script>

<style lang="less" scoped>
  .cont{
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 16px;
  }
</style>

效果图：