VUE入门-过滤器的使用

By：Roy.LiuLast updated：2020-09-16

vue过滤器说白了，就是自己对数据进行一些特殊处理之后再显示出来，一般来说有两种方式，局部过滤器与全局过滤器。

全局过滤器: Vue.filter('过滤器名',过滤方式fn );

局部过滤器（组件内过滤器）: filters:{ '过滤器名',过滤方式fn }

使用方法，在需要使用过滤器的地方{{data|过滤器名称}}

下面的例子，分别定义了一个全局过滤器和一个组件内过滤器:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="vue.js"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			//global filter
			Vue.filter('dateFormat',function(val){
			    return val.getFullYear() + "-" + (val.getMonth()+1);
			})
			new Vue({
				el:"#app",
				template:`
				    <div>
					    <input type="text" v-model="name" />
					    <div id="reverse">{{name|reverse}}</div>
						<div id="reverse">{{currentDate|dateFormat}}</div>
					</div>				
				`,
				data:function(){
					return {
						name:'tom',
						currentDate:new Date()
					}
				},
				// local filter
				filters:{
					reverse:function(val){
						return val.split('').reverse().join('');
					}
				}
			})
		</script>
	</body>
</html>

From：一号门

Tags: vue

Previous:VUE入门-数据绑定及事件绑定

Next:VUE入门-计算属性以及数据监听

COMMENTS

VUE入门-过滤器的使用

RELATED ARTICLES

COMMENTS