VUE入门-过滤器的使用

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

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>


上一篇: VUE入门-数据绑定及事件绑定
下一篇: VUE入门-计算属性以及数据监听
 评论 ( What Do You Think )
名称
邮箱
网址
评论
验证
   
 

 


  • 微信公众号

  • 我的微信

站点声明:

1、一号门博客CMS,由Python, MySQL, Nginx, Wsgi 强力驱动

2、部分文章或者资源来源于互联网, 有时候很难判断是否侵权, 若有侵权, 请联系邮箱:summer@yihaomen.com, 同时欢迎大家注册用户,主动发布无版权争议的 文章/资源.

3、鄂ICP备14001754号-3, 鄂公网安备 42280202422812号