前言
我们接着上一篇文章01-04.Vue的使用示例:列表功能 来讲。
下一篇文章 02-Vue实例的生命周期函数
过滤器的概念
概念:Vue.js 允许我们自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值表达式、 v-bind表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示。
过滤器的基本使用
比如说,我要将data中msg 后面添加字符串。可以这样做:
(1)在差值表达式中这样调用:
<p>{{ msg | msgFormat }</p>
上方代码的意思是说:
-
管道符前面的
msg
:要把msg
这段文本进行过滤, -
管道符后面的
msgFormat
:是通过msgFormat
这个过滤器进行来操作。
(2)定义过滤器msgFormat
:
// filter是过滤器的对象,里面可以定义多个过滤器
// 定义一个过滤器,名字叫做 msgFormat
filters: {
msgFormat: function(msg){
return msg + '111111'
}
}
上方代码解释:
-
过滤器函数function中,第一个参数指的管道符前面的msg。
-
return 返回的值可以直接在页面上显示
最终,完整版代码如下:
<template>
<div id="app">
{{ '22222' | msgFormat }}
</div>
</template>
<script>
export default {
filters: {
msgFormat: function(msg){
return msg + '111111'
}
},
data() {
return {};
},
methods: {
mySubmit: function () {
alert("ok");
},
},
};
</script>
网页显示效果如下:
给过滤器添加多个参数
上面的举例代码中,{{ msg | msgFormat }}
中,过滤器的调用并没有加参数,其实它还可以添加多个参数。
接下来,我们在上面的举例代码中进行改进。
改进一:过滤器加一个参数。如下:
将 msg 这个字符串进行拼接。代码如下:
<template>
<div id="app">
<!-- 【重要】通过 过滤器 msgFormat 对 msg 进行过滤。括号里的参数代表 function中的 arg2-->
<p>{{ msg | msgFormat('xxx') }}</p>
</div>
</template>
<script>
export default {
filters: {
msgFormat: function(msg, arg2){
return msg + '111111' + arg2
}
},
data() {
return {
msg: "聆听感受思考"
};
},
methods: {
mySubmit: function () {
alert("ok");
},
},
};
</script>
<style>
#app{
color: black;
}
</style>
注意代码中那行重要的注释:括号里的参数代表 function中的 arg2。