VUE----filter过滤器

我使用的是vue-cli2
vue中有种叫过滤器的东西，它可以将数据以我们想要的方式展示，其中过滤器又分为全局过滤器和局部过滤器。

1.局部过滤器：

顾名思义，局部过滤器就是在组件中使用，并且只在当前组件中生效的过滤器，它用于我们过滤不常用的数据。

//script中代码：
filter:{
  filter_name(val){
    return val_deal_function
  }
}
//模板中使用：
{{variable |filter_name}}

2.全局过滤器：

但是有的变量例如时间后端传来的数据是时间戳、金钱后端传来的有可能是整数，但是我们页面要显示的时间是时间格式、金钱需要保留两位小数等等，这个时候我们就可以定义一个全局过滤器减少代码的冗余。
1.在main.js同级目录下创建filters文件夹，在文件夹中创建filters.js文件。
2.这里我只简单封装了时间和金钱过滤器：

    /**
     * [将数字保留两位小数]
     * @Author   juming
     * @DateTime 2021-01-22T14:34:59+0800
     * @param    {[type]}                 val [description]
     * @return   {[type]}                     [description]
     */
    const my_number_format = function(val){
        return parseFloat(val).toFixed(2)
    }

    /**
     * [将时间戳格式化为YYYY-MM-DD HH:II]
     * [需要先将时间戳 * 1000，否则一直是1970年]
     * @Author   juming
     * @DateTime 2021-01-22T14:35:39+0800
     * @param    {[type]}                 val [description]
     * @return   {[type]}                     [description]
     */
    const my_date_format = function(val){
        let timestamp = parseInt(val) * 1000
        let date = new Date(timestamp);
      let seperator1 = "-";
      let seperator2 = ":";
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      if (month >= 1 && month <= 9) {
          month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
      }
      let hours = date.getHours();
      if(hours >=0 && hours <=9){
          hours = "0" + hours;
      }
      let minutes = date.getMinutes();
      if(minutes >=0 && minutes <=9){
          minutes = "0" + minutes;
      }
      let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + ' ' + hours + seperator2 + minutes;
      return currentdate;
    }

export {
    my_number_format,
    my_date_format
}

3.main.js中引入：

import * as filters from './filters/filters'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

4.组件中就可以像局部过滤器一样直接使用。