一、过滤器的定义
对要显示的数据进行特定格式化后再显示(适用于一些简单的逻辑处理)
二、过滤器使用语法:
1. 注册过滤器
(1)全局过滤器
Vue.filter(name, callback),其中第一个参数为定义的过滤器的名称,第二个参数为过滤器函数。
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器</title>
<script src="../../js/vue.js"></script>
<script src="../../js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
<h2>现在的时间是:{{time | forTime}}</h2>
</div>
<script>
Vue.filter('forTime', function(value) {
return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss');
});
new Vue({
el: '#root',
data: {
time: +new Date()
}
})
</script>
</body>
</html>
代码执行结果如下:
(2)局部过滤器
new Vue(filters: { name: function( ){ }}) ,其中name为过滤器名称,以上可以简写为 new Vue( filters: name( ) { })。
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器</title>
<script src="../../js/vue.js"></script>
<script src="../../js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
<h2>{{msg | mySlice}}</h2>
</div>
<script>
Vue.filter('forTime', function(value) {
return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss');
});
new Vue({
el: '#root',
data: {
msg: '你好啊,Vue'
},
filters: {
mySlice(value) {
return value.slice(0, 3);
}
// 以上函数可以简写为:
//mySlice: function(value) {
// return value.slice(0, 3)
//}
}
})
</script>
</body>
</html>
执行代码结果如下:
(3)多个过滤器串联以及过滤器接收参数的使用:
过滤器可以串联:
|
在这个例子中,filterA
被定义为接收单个参数的过滤器函数,表达式 message
的值将作为参数传入到filterA
函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB
,将 filterA
的结果传递到 filterB
中。
作为函数,过滤器可以传递参数:
|
这里,filterA
被定义为接收三个参数的过滤器函数。其中 message
的值作为第一个参数,普通字符串 'arg1'
作为第二个参数,表达式 arg2
的值作为第三个参数。
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器</title>
<script src="../../js/vue.js"></script>
<script src="../../js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
<!-- 不传递参数,表示将当前时间转化为str默认值的形式:"YYYY年MM月DD日 HH:mm:ss" -->
<h2>现在的时间是:{{time | forTime}}</h2>
<!-- 在forTime()过滤器函数传参,表示转化为'YYYY年MM月DD日'的格式 -->
<h2>现在的时间是:{{time | forTime('YYYY年MM月DD日')}}</h2>
<!-- 将filter函数forTime()和mySlice串联使用,先将目前的时间格式化为"YYYY年MM月DD日 HH:mm:ss"的形式,然后只保留前5个字符 -->
<h2>现在的时间是:{{time | forTime('YYYY年MM月DD日') | mySlice}}</h2>
</div>
<script>
new Vue({
el: '#root',
data: {
time: +new Date(),
msg: '你好啊,Vue'
},
filters: {
mySlice(value) {
return value.slice(0, 5);
},
forTime(value, str="YYYY年MM月DD日 HH:mm:ss") {
return dayjs(value).format(str);
}
}
})
</script>
</body>
</html>
代码运行结果如下:
2. 使用过滤器:
过滤器可以用在两个地方:双花括号插值和 v-bind
表达式 (后者从 2.1.0+ 开始支持)。
{{xxx | 过滤器名}} 或者 v-bind:属性 = "xxx | 过滤器名"
三、注意点:
使用过滤器并没有改变原来的数据,是产生新的对应的数据。
四、完整代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器</title>
<script src="../js/vue.js"></script>
<script src="../js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
<!-- 不传递参数,表示将当前时间转化为str默认值的形式:"YYYY年MM月DD日 HH:mm:ss" -->
<h2>现在的时间是:{{time | forTime}}</h2>
<!-- 在forTime()过滤器函数传参,表示转化为'YYYY年MM月DD日'的格式 -->
<h2>现在的时间是:{{time | forTime('YYYY年MM月DD日')}}</h2>
<!-- 将filter函数forTime()和mySlice串联使用,先将目前的时间格式化为"YYYY年MM月DD日 HH:mm:ss"的形式,然后只保留前5个字符 -->
<h2>现在的时间是:{{time | forTime('YYYY年MM月DD日') | mySlice}}</h2> <br><br>
<!-- v-bind使用过滤器 -->
<input type="text" v-bind:value="message | mySlice1">
</div>
<script>
// 全局过滤器:
Vue.filter('forTime', function(value, str="YYYY年MM月DD日 HH:mm:ss") {
return dayjs(value).format(str);
});
new Vue({
el: '#root',
data: {
time: +new Date(),
msg: '你好啊,Vue',
message: '你好!请输入姓名'
},
// 局部过滤器
filters: {
mySlice(value) {
return value.slice(0, 5);
},
mySlice1(value) {
return value.slice(0, 3);
}
// forTime(value, str="YYYY年MM月DD日 HH:mm:ss") {
// return dayjs(value).format(str);
// }
}
})
</script>
</body>
</html>
代码运行结果如下:
五、总结:
1. 定义:
对要显示的数据进行特定格式化后再显示(适用于一些简单的逻辑处理)
2.语法:
(1) 注册过滤器: Vue.filter(name, callback) 或 new Vue(filters: {})
(2) 使用过滤器:{{xxx | 过滤器名}} 或者 v-bind:属性 = "xxx | 过滤器名"
3.注意点:
(1)过滤器也可以接受额外参数、多个过滤器可以串联
(2)使用过滤器并没有改变原来的数据,而是产生新的对应的数据