vue.js实战

第一章:vue.js-过滤器(基础篇)

2018-07-13  本文已影响15人  六个周

      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基本语法的情况下,我们对过滤器有了一个简单的认识,过滤器应当用于处理简单的文本转换,如果要实现复杂的数据变换,应该使用计算函数。


下一章:vue.js-指令与事件(基础篇)

上一篇 下一篇

猜你喜欢

热点阅读