<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
< src="vue.js"></>
</head>
<body>
<div id="box">
{{a | toDou}}
</div>
<>
Vue.filter(‘toDou‘,function(input){
return input<10?‘0‘+input:‘‘+input;
});
var vm=new Vue({
data:{
a:9
},
methods:{
}
}).$mount(‘#box‘);
</>
</body>
<双击查看原图ml>
我通过Vue.filter()自定义了一个过滤器,名称叫做toDou,然后给他一个回调函数,描述这个过滤器的作用。回调函数中有一个参数input,这里的input接收的就是代码里面的a,为什么是a呢?很明显,因为a在显示的时候,调用了toDou这个过滤器嘛。
这个自定义过滤器有什么作用呢?比如说我想将时间戳转化为正常时间,继续看例子。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
< src="vue.js"></>
</head>
<body>
<div id="box">
{{a | date}}
</div>
<>
Vue.filter(‘date‘,function(input){
var oDate=new Date(input);
return oDate.getFullYear()+‘-‘+(oDate.getMonth()+1)+‘-‘+oDate.getDate()+‘ ‘+oDate.getHours()+‘:‘+oDate.getMinutes()+‘:‘+oDate.getSeconds();
});
var vm=new Vue({
data:{
a:Date.now()
},
methods:{
}
}).$mount(‘#box‘);
</>
</body>
<双击查看原图ml>
我们在data里面定义的a,结果就是获取当前时间的时间戳。我想让他变成正常的年月日时间显示,所以自定义一个过滤器给他,我们定义的过滤器就叫date,然后获取年月日时分秒的方法想必大家都很熟悉了,他会根据时间戳自动获取相应的数据。嗯,时间转化,就是这么简单咯~~~
原文:http://www.cnblogs.com/fm060/p/6782585.html