Vue中的过滤器filter

最新推荐文章于 2025-07-11 11:54:59 发布

原创最新推荐文章于 2025-07-11 11:54:59 发布 · 370 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#filter #vue

Vue 专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍了Vue.js中过滤器的定义与使用方法，包括全局过滤器与组件内过滤器的定义，以及如何通过花括号语法调用过滤器进行数据格式化。

初学习Vue，对于具体的使用场景，还没有实践，在官方介绍中，说主要的目的用于文本的格式化。

Filter过滤器的定义方式:

1.Vue 的全局定义,

//简单的一个过滤器
Vue.filter('testFilter',function(value){
    return value+'测试全局过滤器';
});

注意点：1.在使用Vue进行全局定义过滤器filter时，需要的是filter而不是filters

2.首选要定义才能使用，否则，就会报如下错误：

2.组件内的定义：

		filters:{
			json:function(value){
				return value
			},
			yearFormat:function(value){

				return value+'年'
			},
			cel:function(value){
				return value+'是好年头'
			},
			appendStr:function(value1,value2,value3){
				return value1+value2+value3
			},

		},

2.使用的方式：

1) 花括号中{{message|filterA}}

2.1花括号的几种传参数方式

2.1.1 简单的一个参数变量调用过滤器

//我要吧Vue实例中的Data数据打印出来
<pre>
{{ this.$data|json }}
</pre>
filters:{
    json:function(value){
        return value
    },
},

2.2.2多个参数变量

<p>{{'2018','年','是不错的一年'|appendStr}}</p>
<p>{{'2018'|appendStr('年','是很不错的一年!!!')}}</p>
filters:{
appendStr:function(value1,value2,value3){
	return value1+value2+value3
	},
},

2.2.3多个过滤器调用 obj | filterA | filterB ,也就是说，变量obj,调用过滤器filterA，得到的值再给到过滤器filterB,

<p>{{ '2018' | yearFormat | cel}}</p>
filters:{
yearFormat:function(value){

	return value+'年'
},
cel:function(value){
	return value+'是好年头'
}

},