VUE——常用自定义过滤器定义与使用

Vue2.x 不再支持自带的过滤器，使用过滤器需要自定义

且过滤器只能使用在v-bind和双花括号里，以管道符 “|”隔开，参数类似于函数的形式 如：{{msg | filter(param)}}

此文记录自己用过的的过滤器 以便后续使用

————————————————————————————————————————————

在src 文件夹中新建filters文件夹，文件夹里面新建index.js文件，用来声明过滤器的实现方法并导出

index.js文件：

//默认时间
const normalTime = time => {
  if (time) {
    var oDate = new Date();
    oDate.setTime(time);

    var y = oDate.getFullYear();
    var m = oDate.getMonth() + 1;
    var d = oDate.getDate();

    var h = oDate.getHours();
    var m = oDate.getMinutes();
    var s = oDate.getSeconds();

    return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
  }
};
//补零
const fillZero = num => {
  return num < 10 ? "0" + num : num;
};
//带参数
//货币形式
const currency = (value, unit, decimal) => {
  let reg = /^[0-9]+.?[0-9]*$/;
  if (!reg.test(value)) return "";
  value = decimal == undefined ? value : value.toFixed(decimal);
  return `${unit}${value}`;
};
//首字母大写
const capitalize = value => {
  if (!value) return "";
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
};
//时间戳转换为指定格式时间
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 = ` ${mm < 10 ? "0" + mm : mm}:${ddmin < 10 ? "0" + dd : dd}`;
  }
  if (format == "hh:mm") {
    result = ` ${h < 10 ? "0" + h : h}:${min < 10 ? "0" + min : min}`;
  }
  return result;
};
export default {
  normalTime,
  fillZero,
  currency,
  capitalize,
  timeFormat
};

在main.js中将此文件导入，并定义过滤器

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]);
});

至此，其他地方就可以直接使用了

例如：

{{num|fillZero}}

带参数：

{{num|currency("$")}}

以上是项目中需要用到多个过滤器，且多次重复使用，可单独于文件中进行声明管理，在main中引入，其他组件即可使用

当单个组件中使用时，可定义局部组件使用：

局部定义过滤器

export default {
  name:'test',
  data(){
    return {
      title:'过滤器 & 指令',
      arr:[5,3,2,6,9,1,22,45,23,67,12,14],
      msg:'this is filter',
      num:99.9,
      time:1529979522000,
      focus:true
    }
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  },
  methods:{
    clickP(){
      alert(1);
    }
  }
}

也可以再全局中定义：以便使用，以首字母大写为例：

Vue.filter('capitalize',function(value){
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

以下为新用到的过滤器实现方法：（会不定时增加）