当前位置：首页 > news >正文

01-05.Vue自定义过滤器

news 2025/7/28 22:54:04

前言

我们接着上一篇文章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>