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({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在html上显示当前时间相关推荐

怎样在html中显示时间,如何在网页上显示当前时间
最近做的页面中有需要在页面直接显示当前时间的功能,一开始不知道怎么实现,后来经过查找资料来实现了该功能.虽然用过该功能的人会觉得很简单,但是在这里还是想总结出来,可以供不熟悉的人参考一下. 具体实现代 ...
mcgs 日期选择窗口_MCGS中想在页面上显示当前时间,要怎样做啊?
asp.net实现动态显示时间,无需用到javascrip,而是用了AJAX. Default.aspx页面:先拉一个ScriptManager控件到页面,然后拉一个UpdatePanel控件.Upd ...
Vue过滤器的简单使用--实时显示格式化的时间
Vue的过滤器的使用是在{{}}插值的尾部添加一个管道符 | 过滤的规则是自己定义的,通过给Vue实例添加选项filters来设置通过过滤器对时间进行格式化从而实时显示时间 <!doctyp ...
android时钟秒针转动,TextView显示系统时间(时钟功能带秒针变化
我们开启一个线程,线程每隔一秒发送一次消息,我们在消息中更新TextView上显示的时间就ok了. 首先我们在布局文件中放一个TextView用来显示时间,如下所示: xmlns:android=&q ...
php显示时间秒针走,Android_TextView显示系统时间(时钟功能带秒针变化，我们开启一个线程，线程每隔 - phpStudy...
TextView显示系统时间(时钟功能带秒针变化我们开启一个线程,线程每隔一秒发送一次消息,我们在消息中更新TextView上显示的时间就ok了. 首先我们在布局文件中放一个TextView用来显示 ...
vue中解决时间在ios上显示NAN的问题
vue中解决时间在ios上显示NAN的问题参考文章: (1)vue中解决时间在ios上显示NAN的问题 (2)https://www.cnblogs.com/wzs5800/p/9580785.ht ...
element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
在 Vue 中实现 sticky 鼠标上滑显示、下滑隐藏的效果
在 Vue 中实现 sticky 鼠标上滑显示.下滑隐藏的效果首先在需要实现该效果的组件中,创建一个数据属性,例如: isStickyVisible: true,并将其初始值设置为 true. 在组 ...
Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...

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

导入Vue依赖的CDN

创建视图

Model

总代码

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

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

全部代码

vue --- 使用vue在html上显示当前时间相关推荐

最新文章

热门文章