Vue.js - 过滤器filter的使用详解(附:日期格式化显示过滤器)
作者:hangge | 2020-01-16 08:10
Vue.js 允许我们自定义过滤器,用于一些常见的文本格式化工作。过滤器不会改变真正的 data,而只是改变渲染的结果,并返回过滤后的版本。
(2)然后在 main.js 中将这个 js 引入即可:
(2)也可以在 v-bind 表达式中使用过滤器:
比如下面代码调用前面定义的字符串截断这个过滤器:
(2)使用效果分别如下:
一、过滤器的定义
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; });
全部评论(0)