快捷導(dǎo)航

vue 2.1.3 實時顯示當(dāng)前時間,每秒更新的方法

更新時間：2018年09月16日 09:40:31 作者：銅鏡123

今天小編就為大家分享一篇vue 2.1.3 實時顯示當(dāng)前時間,每秒更新的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如下所示：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Vue</title> 
 </head>
 <body> 
  <div id="app">
   {{date}}
  </div>
  <!-- 開發(fā)環(huán)境版本，包含了用幫助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script type="text/javascript">  
   var app = new Vue({
    el:'#app',
    data:{
     date: new Date()
    },
    mounted () {
     var _this = this; //聲明一個變量指向vue實例this,保證作用域一致
     this.timer = setInterval(function() {
      _this.date = new Date();//修改數(shù)據(jù)date
     }, 1000);
    },
    beforeDestroy () {
     if(this.timer) {
      clearInterval(this.timer);//在vue實例銷毀錢，清除我們的定時器
     }
    }    
   });
   
  </script>
 </body>
</html>

以上這篇vue 2.1.3 實時顯示當(dāng)前時間,每秒更新的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

適用于 Vue 的播放器組件Vue-Video-Player操作
這篇文章主要介紹了適用于 Vue 的播放器組件Vue-Video-Player操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
淺談vue的踩坑路
下面小編就為大家?guī)硪黄獪\談vue的踩坑路。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
vue?請求攔截器的配置方法詳解
這篇文章主要為大家介紹了vue?請求攔截器的配置方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-01-01
nuxt引入組件和公共樣式的操作
這篇文章主要介紹了nuxt引入組件和公共樣式的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
利用Vue3+Element-plus實現(xiàn)大文件分片上傳組件
在開發(fā)中如果上傳的文件過大,可以考慮分片上傳,分片就是說將文件拆分來進行上傳,將各個文件的切片傳遞給后臺,然后后臺再進行合并,下面這篇文章主要給大家介紹了關(guān)于利用Vue3+Element-plus實現(xiàn)大文件分片上傳組件的相關(guān)資料,需要的朋友可以參考下
2023-01-01
vue3.0 CLI - 2.3 - 組件 home.vue 中學(xué)習(xí)指令和綁定
這篇文章主要介紹了vue3.0 CLI - 2.3 - 組件 home.vue 中學(xué)習(xí)指令和綁定的相關(guān)知識，本文通過實例代碼相結(jié)合的形式給大家介紹的非常詳細 ,需要的朋友可以參考下
2018-09-09
html+vue.js 實現(xiàn)漂亮分頁功能可兼容IE
功能比較簡單，在單一html中使用vue.js分頁展示數(shù)據(jù)，并未安裝腳手架，或使用相關(guān)UI框架，此時需要手寫一個分頁器，不失為最合理最便捷的解決方案,需要的朋友可以參考下
2020-11-11
vue+element table表格實現(xiàn)動態(tài)列篩選的示例代碼
這篇文章主要介紹了vue+element table表格實現(xiàn)動態(tài)列篩選的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
vue2.0 常用的 UI 庫實例講解
這篇文章主要介紹了vue2.0 常用的 UI 庫實例講解，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
2017-12-12
淺談vue-router 路由傳參的方法
這篇文章主要介紹了淺談vue-router 路由傳參的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12