Vue之过滤器-优快云博客

文章介绍了Vue.js框架中过滤器的功能，用于在数据显示前进行数据处理和筛选。详细讲解了如何创建自定义过滤器，包括在模板和`v-bind`中使用，以及在组件内和全局范围定义过滤器。同时，文中提供了示例代码，展示了如何实现如`capitalize`、`addZero`和`formatNumber`等过滤器功能，并结合实际应用场景进行了演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三、过滤器

1. 简介

用来过滤模型数据，在显示之前进行数据处理和筛选
语法：{{data | filter1(参数) | filter2(参数)}}

2.自定义过滤器

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

可以在一个组件的选项中定义本地的过滤器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。
过滤器可以串联：

{{ message | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
过滤器是 JavaScript 函数，因此可以接收参数：

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg1’ 作为第二个参数，表达式 arg2 的值作为第三个参数。

示例：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<div class="mui-content" id="content">
			<h3>{{8 | addZero}}</h3>
			
			<h3>{{66.8935462 | formatNumber(5,'这是四舍五入')}}</h3>
			
			<h3>{{currentTime | formatTime}}</h3>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init();
			// 自定义全局过滤器
			Vue.filter('addZero',function(data){
				console.log(data);
				return data<10?'0'+data:data;
			})
			Vue.filter('formatNumber',function(data,n,msg){
				console.log(data,n,msg);
				return msg+data.toFixed(n);//toFixed方法有bug,不准，建议自己写
			})
			var vm=new Vue({
				el:"#content",
				data:{
					currentTime:Date.now()
				},
				filters:{
					//局部过滤器
					formatTime:function(data){
						console.log(data);
						var d=new Date(data);
						return d.getFullYear()+"-"+d.getMonth()+"-"+d.getDay()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
					}
				}
			})
		</script>
	</body>

</html>