vue --- > 使用vue在html上显示当前时间

希望如下效果(时间按秒钟更新)导入Vue依赖的CDN<script src="https://unpkg.com/vue/dist/vue.min.js"> </script>创建视图<div id="app">{{date}}</div>Model<script>var app = new Vue({...

栗子好好吃

3350人浏览 · 2019-04-11 15:42:10

栗子好好吃 · 2019-04-11 15:42:10 发布

希望如下效果(时间按秒钟更新)
在这里插入图片描述

导入Vue依赖的CDN

<script src="https://unpkg.com/vue/dist/vue.min.js"> </script>

创建视图

<div id="app">{{date}}</div>

Model

<script>
    var app = new Vue({
        el: "app",
        data: {
            date: new Date();  // 初始化date
        }
        mounted: function () {
            var _this = this;
            this.timer = setInterval(function() {
                _this.date = new Date();  // 每隔1秒钟更新一次date
            }, 1000);
        },
        beforeDestroy: function () {   // 清除定时器
            if (this.timer) {
                clearInterval(this.timer);
            }
    }
})
</script>

总代码

<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div id="app">
    {{date}}
</div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                date: new Date()
            },
            mounted: function () {
                var _this = this;
                this.timer = setInterval(function() {
                    _this.date = new Date();
                }, 1000);
            },
            beforeDestroy: function () {
                if (this.timer) {
                    clearInterval(this.timer);
                }
            }
        })
    </script>

</body>
</html>

你可能觉得上面的时间看着别扭.

你真正需要的可能是下面这样
在这里插入图片描述
那么接下来,我们需要一个formatDate函数.用于将日期转化成需要的格式

// 首先编写一个padDate函数,用于将小于0的数,转换成0a的形式
var padDate = function (value){
    return value < 10?  "0" + value : value
}
// 下面编写formatDate函数. 用于转换日期格式
var formatDate = function(value) {
    var date = new Date(value);
    var year = date.getFullYear();   // 获取年份
    var month = padDate(date.getMonth()+1);  // js里面月份(0~11月)会比正常的少1; 使用padDate函数转换小于10的月份
    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;
}

使用filters 对{{}}中的参数进行过滤（用上面定义的formatDate）

// HTML 
<div id = "app"> 
    {{ date | formatDate}}
</div>

// javascript
var app = new Vue({
   el: '#app',
   data:{
      date: new Date();
   },
   filters: {
       formateDate: formatDate  // 注意此处没有括号,代表函数赋值
   }
// ps: 过滤的实质是在date显示之前,先作为参数传给formatDate函数进行处理

全部代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div id="app">
	{{ date | formatDate }}
</div>
	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
	<script>
		var padDate = function (value) {
			return value < 10 ?  '0' + value : value;
		};
		var formatDate = function (value) {  // 这里的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 minutes = padDate(date.getMinutes());
			var seconds = padDate(date.getSeconds());
			return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
		}
		var app = new Vue({
			el: '#app',
			data:{
				date: new Date()
			},
			filters: {
				formatDate:formatDate
			},
			mounted: function () {
				var _this = this;
				this.timer = setInterval(function() {
					_this.date = new Date();
				}, 1000);
			},
			beforeDestroy: function (){
				if(this.timer) {
					clearInterval(this.timer);
				}
			}
		})
	</script>

</body>
</html>

参考《Vue.js实战》 P12

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}$/, //不连续的两位字母// /^