第一章:vue.js-过滤器(基础篇)
vue.js支持在{{}}插值的尾部添加一个管道符“(|)”对数据进行过滤,经常用于格式化文本,比如字母全部大写、货币千位使用逗号分隔符等等。过滤的规则是自定义的,通过给Vue实例添加选项filters来设置,例如本小节用来copy一份实时显示当前时间的示例,可以对时间进行格式化处理:
直接上代码
<div id="lmz">//挂载点
{{ date | formatDate }}
</div>
<script>
var parseDate = function(value){
return value<10?0+value:value;
}
var lmz= new Vue({
el:"#lmz",
data:{
date:new Date()
},
filters:{//过滤器
formateDate:function(value){
var date = new Date(value);
var year =date.getFullYear();
var month = padDate(date.getMonth(+1));
var day = padDate(date.getDate());
var hours = padDate(date.getHours());
var minu = padDate(date.getMinutes());
var seconds = padDate(date.getSeconds());
return year+"-"+month+"-"+day+hours+"-"+minu+"-"+seconds;
}
},
mounted:function(){//生命周期钩子函数,el挂载到实例上后调用
var that = this;
this.timer = setInterval(function(){
that.date = new Date();
},1000); },
beforeDestroy:function(){//生命周期钩子函数,实例销毁之前调用
if(this.timer){
clearInterval(this.timer); }
}
});
</script>
小结:通过这个简单的一个小例子,在熟悉vue基本语法的情况下,我们对过滤器有了一个简单的认识,过滤器应当用于处理简单的文本转换,如果要实现复杂的数据变换,应该使用计算函数。