vue过滤器

1.介绍

过滤器顾名思义就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰。

过滤器分为局部过滤器和全局过滤器

2.局部过滤器

1.局部过滤器就是在一个组件的选项中定义本地的过滤器，只有该组件可以用。在我们一般开发中，对于时间后端一般只会返回

一个时间戳让前端自己处理，来看下面的例子：

<template>
  <div>
    <!-- 4. 渲染数据，设置过滤器 -->
    {{ times | conversion }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 1.模拟一个时间戳数据
      times: 1616959086000,
    };
  },
  // 2. 定义过滤器
  filters: {
    //3.定义一个处理函数，参数value为要处理数据
    conversion: function (value) {
      //调用Date的方法，处理时间戳
      return new Date(value).toLocaleString();
    },
  },
};
</script>

当然过滤器还可以进行串联，也就是说可以定义多个过滤器，相当于先用conversion函数处理times后返回的结果再被其它过滤器进行

使用。

例子：

<template>
  <div>
    <!-- 5. 放过滤器 -->
    {{ times | conversion | againChange }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 1.模拟一个时间戳数据
      times: 1616959086000,
    };
  },
  // 2. 定义过滤器
  filters: {
    //3.定义一个处理函数，参数value为要处理数据
    conversion: function (value) {
      //调用Date的方法，处理时间戳
      return new Date(value).toLocaleString();
    },
    //4.再定义一个过滤器，给数据前加上"时间为："这几个字
    againChange: function (value) {
      return "时间为：" + value;
    },
  },

};
</script>

3.全局过滤器

1.首先src目录下创建filter文件夹，并在其建立filter.js文件，js代码如下

const conversion = function (value, format) {
      var date = new Date(value);
      function addZero(date) {
        if (date < 10) {
          return "0" + date;
        }
        return date;
      }
      let getTime = {
        yyyy: date.getFullYear(),
        yy: date.getFullYear() % 100,
        MM: addZero(date.getMonth() + 1),
        M: date.getMonth() + 1,
        dd: addZero(date.getDate()),
        d: date.getDate(),
        HH: addZero(date.getHours()),
        H: date.getHours(),
        hh: addZero(date.getHours() % 12),
        h: date.getHours() % 12,
        mm: addZero(date.getMinutes()),
        m: date.getMinutes(),
        ss: addZero(date.getSeconds()),
        s: date.getSeconds(),
        w: (function () {
          let a = ["日", "一", "二", "三", "四", "五", "六"];
          return a[date.getDay()];
        })(),
      };
      for (let i in getTime) {
        format = format.replace(i, getTime[i]);
      }
      return format;
    }
  export {
	conversion //通过此处导出方法
} 

2.在main.js引入全局过滤器

import {conversion} from './filters/filters.js'
Vue.filter('conversion', conversion);

这样便可以在过滤器中进行使用了。

原文地址：https://juejin.cn/post/7010957937560518686