首页 > 代码库 > vue-filter过滤
vue-filter过滤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
< src="http://www.mamicode.com/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="http://www.mamicode.com/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,然后获取年月日时分秒的方法想必大家都很熟悉了，他会根据时间戳自动获取相应的数据。嗯，时间转化，就是这么简单咯~~~
vue-filter过滤
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。