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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/251464.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/251464.shtml
英文地址，請注明出處：http://en.pswp.cn/news/251464.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！