首頁 > web前端 > Vue.js > vue.js中如何用定時器

vue.js中如何用定時器

coldplay.xixi
發布: 2020-11-10 14:03:17
原創
11757 人瀏覽過

vue.js中使用定時器的方法:1、使用循環執行setInterval,每過一段時間都會執行一次這個方法,直到這個定時器被銷毀掉;2、定時執行setTimeout,定時執行setTimeout是設定一個時間,等待時間到達的時候只執行一次。

vue.js中如何用定時器

【相關文章推薦:vue.js

vue.js中使用定時器的方法:

一、循環執行(setInterval)

顧名思義,循環執行就是設定一個時間間隔,每過一段時間都會執行一次這個方法,直到這個定時器被銷毀掉

用法是setInterval(“方法名或方法”,“延時”), 第一個參數為方法名或方法,注意為方法名的時候不要加括號,第二個參數為時間間隔

<template>
  <section>
    <h1>hello world~</h1>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        timer: &#39;&#39;,
        value: 0
      };
    },
    methods: {
      get() {
        this.value ++;
        console.log(this.value);
      }
    },
    mounted() {
      this.timer = setInterval(this.get, 1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  };
</script>
登入後複製

vue.js中如何用定時器

上面的範例就是頁面初始化的時候創建了一個定時器setInterval,時間間隔為1秒,每一秒都會呼叫一次函數get,從而使value的值加一。

二、定時執行(setTimeout)

定時執行setTimeout是設定一個時間,等待時間到達的時候只執行一次,但執行完以後計時器還在,只是沒有執行

用法是setTimeout(“方法名稱或方法”, “延時”); 第一個參數為方法名稱或方法,注意為方法名稱的時候不要加括號,第二個參數為時間間隔

<template>
  <section>
    <h1>hello world~</h1>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        timer: &#39;&#39;,
        value: 0
      };
    },
    methods: {
      get() {
        this.value ++;
        console.log(this.value);
      }
    },
    mounted() {
      this.timer = setTimeout(this.get, 1000);
    },
    beforeDestroy() {
      clearTimeout(this.timer);
    }
  };
</script>
登入後複製

vue.js中如何用定時器

上面是頁面初始化時候建立一個定時器setTimeout,只在1秒後執行一次方法。

相關免費學習推薦:JavaScript(影片)

#

以上是vue.js中如何用定時器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
javascript - vue.js與html頁面之間的跳轉
來自於 1970-01-01 08:00:00
0
0
0
vue.js - ViewModel和Controller有什麼差別?
來自於 1970-01-01 08:00:00
0
0
0
javascript - 有大神做過vue.js spa單頁的SEO嗎?
來自於 1970-01-01 08:00:00
0
0
0
使用Vue.js Web元件與Pinia
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板