vue --- 使用vue在html上显示当前时间
生活随笔
收集整理的這篇文章主要介紹了
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函數.用于將日期轉化成需要的格式
使用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上显示当前时间的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue 导出excel 导出多个shee
- 下一篇： Python中曲率与弯曲的转换_黎曼几何