Vue 过滤器的简单使用---实时显示格式化时间

陈不胖Y

于 2023-08-23 18:26:39 发布

阅读量83

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/cfgggg12/article/details/132458610

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Vue 过滤器的简单使用---实时显示格式化时间</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    {{date | formatDate}}
</div>
<script>
    //此函数的作用是在月份、日期、小时等小于10时在前面补0
    var padDate = function(value){
        return value<10 ? '0'+value : value;
    };

    var app = new Vue({
        el:'#app',
        data:{
            date:new Date()
        },
        filters:{
            //这里的value参数就是要过滤的数据
            formatDate : function (value) {
                var date = new Date(value);
                var year = date.getFullYear();
                var month = padDate(date.getMonth());
                var day = padDate(date.getDate());
                var hours = padDate(date.getHours());
                var minutes = padDate(date.getMinutes());
                var seconds = padDate(date.getSeconds());
                //将整理好的格式化的日期返回
                return year+'-'+month+'-'+day+'-'+hours+':'+minutes+':'+seconds;
            }
        },
        //mounted是在el挂载到实例上后调用，一般第一个业务逻辑会在这里开启
        mounted:function(){
            var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
            this.timer = setInterval(function(){
                //设置定时器，每秒执行一次function函数，
                //函数是获取当前时间并给date变量赋值(每秒赋值一次)
                _this.date = new Date();  //修改数据date
            },1000);
        },
        beforeDestroy:function(){
            if(this.timer){
                clearInterval(this.timer);
            }
        }
    })
</script>
</body>
</html>

这是完成之后的效果