vue实时显示当前时间且转化为“yyyy-MM-dd hh:mm:ss”格式

在实际运用中时间格式“yyyy-MM-dd hh:mm:ss”用的最多,如果需要其他格式可根据需求自行修改,下面直接上代码:引入相应的js即可运行<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vue实时显示当前...

weixin_34289454

4311人浏览 · 2019-03-19 15:53:00

weixin_34289454 · 2019-03-19 15:53:00 发布

在实际运用中时间格式“yyyy-MM-dd hh:mm:ss”用的最多,如果需要其他格式可根据需求自行修改,下面直接上代码:

引入相应的js即可运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实时显示当前时间显示</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/jquery/jquery-3.1.1.min.js"></script>
    <script src="../js/vue/vue.js"></script>
</head>
<body >
<div id="app">当前实时时间:{{dateFormat(date)}}</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            date:new Date()
        },
        mounted () {
            var _this = this; //声明一个变量指向vue实例this,保证作用域一致
            this.timer = setInterval(function() {
                _this.date = new Date();//修改数据date
            }, 1000);
        },
        beforeDestroy () {
            if(this.timer) {
                clearInterval(this.timer);//在vue实例销毁钱，清除我们的定时器
            }
        },
        methods:{
            //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
            dateFormat(time) {
                var date=new Date(time);
                var year=date.getFullYear();
                /* 在日期格式中，月份是从0开始的，因此要加0
                 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                 * */
                var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
                var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
                var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
                var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
                var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
                // 拼接
                return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
            }
        }
    })
</script>
</body>
</html>

效果如下:

转载于:https://www.cnblogs.com/zhoushuang0426/p/10559172.html

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^