Vue は `setInterval` 関数を使用してメソッドを定期的に呼び出します

Vue では、`setInterval` 関数を使用してメソッドを定期的に呼び出すことができます。簡単な例を次に示します。

<template>
  <div>
    <h1>{
   
   { counter }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    };
  },
  mounted() {
    setInterval(this.incrementCounter, 1000); // 每1000毫秒(即1秒)调用incrementCounter方法
  },
  methods: {
    incrementCounter() {
      this.counter++;
    }
  }
};
</script>

上の例では、コンポーネントがマウントされた後に `mounted` フック関数を使用して `setInterval` 関数を呼び出しました。`setInterval` 関数は時々 `incrementCounter` メソッドを呼び出します。ここでは 1 秒ごとに設定されています。

`incrementCounter` メソッドは、`counter` の値を 1 ずつインクリメントします。このメソッドが呼び出されるたびに、Vue はテンプレートの `counter` にバインドされたテキスト コンテンツを自動的に更新します。このようにして、「counter」の値を随時更新することで定期呼び出し方式を実現します。

役に立ったら「いいね!」して、良い習慣を身につけてください!

質問、交換、激励などメッセージを残してください!

おすすめ

転載: blog.csdn.net/libusi001/article/details/131189987