Vue.js - 过滤器filter的使用详解（附：日期格式化显示过滤器）

2020-01-16 发布：hangge 阅读：3332

Vue.js 允许我们自定义过滤器，用于一些常见的文本格式化工作。过滤器不会改变真正的 data，而只是改变渲染的结果，并返回过滤后的版本。

一、过滤器的定义

1，本地过滤器

本地过滤器存储在 Vue 组件中，作过 filters 属性中的函数。下面定义一个将字符串首字母变大写的过滤器：

export default {
  data() {
    return {
    }
  },
  filters: {
    // 首字母大写过滤器
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
};

2，全局过滤器

（1）为方便管理，全局过滤器我们通常都会放在一个单独的 js 文件中，比如 filter_utils.js：

import Vue from 'vue'

// 首字母大写过滤器
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

（2）然后在 main.js 中将这个 js 引入即可：

import './utils/filter_utils';

3，给过滤器添加参数

无论是局部过滤器还是全局过滤器，都可以传入额外的参数。比如下面是一个字符串截断的过滤器，除了指定截取长度外还可以设置自动添加的后缀：

import Vue from 'vue'

// 字符串截断过滤器
// 这个过滤器传了三个参数：text：文本内容, length：截取长度, suffix ：后缀
Vue.filter('readMore', function (text, length, suffix) {
  return text.substring(0, length) + suffix;
})

二、过滤器的使用

1，使用方式

（1）可以在双花括号中使用过滤器：

{{ message | capitalize }}

（2）也可以在 v-bind 表达式中使用过滤器：

<div v-bind:id="rawId | formatId"></div>

2，调用带参数的过滤器

比如下面代码调用前面定义的字符串截断这个过滤器：

{{ message | readMore(3,'...') }}

3，串联多个过滤器

一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右。

{{ message | readMore(3,'...') | capitalize }}

附：日期格式化过滤器

（1）将日期格式化显示应该是项目中最常用的一个过滤器了，下面定义了两个相关的过滤器，分别将日期显示成“年月日”以及“年月日时分”的形式：

import Vue from 'vue'

// 日期格式化过滤器（2019-12-17）
Vue.filter("formatDate", function formatDate(value) {
  var date = new Date(value);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  if (month < 10) {
    month = "0" + month;
  }
  if (day < 10) {
    day = "0" + day;
  }
  return year + "-" + month + "-" + day;
});

// 日期时间格式化过滤器（2019-12-17 15:31）
Vue.filter("formatDateTime", function formatDateTime(value) {
  var date = new Date(value);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var hours = date.getHours();
  var minutes = date.getMinutes();
  if (month < 10) {
    month = "0" + month;
  }
  if (day < 10) {
    day = "0" + day;
  }
  return year + "-" + month + "-" + day + " " + hours + ":" + minutes;
});

（2）使用效果分别如下：