前言
Vue.js 允许自定义过滤器,可被用于一些常见的文本格式化,比如字母的大写、日期的格式化。vue1.x版本有系统自带过滤器,vue2.x之后完全需要自定义,没有自带过滤器。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示。
全局定义
我们可以用全局方法Vue.filter()
自定义一个全局过滤器。这样的话,每一个Vue的对象实例(每一个VM实例)都可以拿到这个过滤器。它接收两个参数:过滤器的名称 、过滤器函数。
Vue.filter('过滤器名称',函数(要过滤的元数据,参数1,参数n){
过滤器的功能
return 过滤的结果
})
使用
<p>{{ msg | msgFormat }</p>
v-bind:属性="数据 | 过滤器名(参数1,参数2)"
-
管道符前面的
msg
:要把msg
这段文本进行过滤, -
管道符后面的
msgFormat
:是通过msgFormat
这个过滤器进行来操作。
自定义私有过滤器
私有过滤器:在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。
举例:日期格式化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
{{ time }}
<br />
{{ time | datefmt }}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
time: new Date()
},
//在某一个vue对象内部定义的过滤器称之为私有过滤器,
//这种过滤器只有在当前vue对象el指定的监管的区域有用
filters: {
// input是自定义过滤器的默认参数,input的值永远都是取自于 | 左边的内容
datefmt: function (input) {
// 定义过滤器的内容:将input的值格式化成 yyyy-MM-dd 字符串输出
var res = '';
var year = input.getFullYear();
var month = input.getMonth() + 1;
var day = input.getDate();
res = year + '-' + month + '-' + day;
return res;
}
}
});
</script>
</html>
上面的代码中,我们在vue实例中,通过filters
关键字,在里面定义了一个局部过滤器datefmt
。
运行结果:
第一行代码显示的是默认的date。第二行代码显示的是格式化之后的date,说明过滤器是起到了作用的。
自定义指令和过滤器的使用场景区别
1、相同点:自定义指令和过滤器都是封装
2、不同的:
1)、自定义指令使用在,dom操作上
2)、过滤器使用在:不需要做逻辑处理,只做数据(格式)转换。用的很少与,因为没多少必要
小知识
过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候 优先调用私有过滤器。