Vueタイマーの詳細な使い方

Vueタイマーの詳細な使い方

この記事では、参考までにタイマーを実装するためのVueの具体的なコードを紹介します。具体的な内容は次のとおりです。

機能紹介:

1. 初期値は0です。[追加]ボタンをクリックすると、数字が1ずつ増加します。[追加]を続けてクリックしても、数字は+1されません。

2. [停止]ボタンをクリックして停止します。+1

ソースコード:

<!DOCTYPE html>
<html を追加="ja">
 
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ドキュメント</title>
  <!-- 1. Vue パッケージをインポートする-->
  <script src="./lib/vue-2.4.0.js"></script>
</head>
 
<本文>
  <!-- 2. 制御する領域を作成する -->
  <div id="アプリ">
    <input type="button" value="追加" @click="追加">
    <input type="button" value="停止" @click="停止">
    <h4>{{ カウント }}</h4>
  </div>
 
  <スクリプト>
    var vm = 新しい Vue({
      el: '#app',
      データ: {
        カウント: 0,
        間隔ID: null
      },
      メソッド: {
        追加() {
          // タイマーが進行中です。関数を終了します。if (this.intervalId != null) { 
            戻る 
          };
          // タイマーは空です。操作 this.intervalId = setInterval(() => {
            このカウント += 1
          }, 400)
        },
        // タイマーを停止する stop() { 
          clearInterval(this.intervalId) // タイマーをクリア this.intervalId = null; // null に設定 
        }
      }
    })
  </スクリプト>
</本文>
 
</html>

以前、エディターは開始タイミング用のコンポーネントを収集しました。このコンポーネントはプロジェクトに直接導入して使用できます。共有していただきありがとうございます。

 <テンプレート>
    <div class="タイマー">
    <div ref="スタートタイマー"></div>
    </div>
    </テンプレート>
    <スクリプト>
    エクスポートデフォルト{
    名前: 'タイマー'、
    データ () {
    戻る {
    タイマー: "",
    コンテンツ: ""、
    時間: 0,
    分: 0,
    秒: 0
    }
    },
    作成された(){
    this.timer = setInterval(this.startTimer, 1000);
    },
    破壊された(){
    タイマー間隔をクリアします。
    },
    
    メソッド: {
    スタートタイマー() {
    this.seconds += 1;
    if (this.seconds >= 60) {
    this.seconds = 0;
    this.minute = this.minute + 1;
    }
    
    (this.minute >= 60)の場合{
    this.minute = 0;
    this.hour = this.hour + 1;
    }
    this.$refs.startTimer.innerHTML = (this.minutes < 10 ? '0' + this.minutes : this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds : this.seconds);
    }
    }
    }
    </スクリプト>
    <スタイル>
</スタイル>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueメソッドに基づくシンプルなタイマーの実装
  • Vue-cliフレームワークはタイマーアプリケーションを実装します
  • Vueを使用してタイマー機能を実装する
  • Vue.jsはシンプルなタイマー機能を実装します
  • Vueはシンプルなタイマーコンポーネントを実装します
  • Vueタイマーの実装方法
  • Vueコンポーネントが破棄された後もタイマーが実行し続ける問題を解決する
  • タイマーを使用してマーキー効果を実現する Vue サンプルコード
  • vueタイマーコンポーネントの実装コード
  • Vue3 でタイマーコンポーネントをカプセル化する方法

<<:  Linux で指定された期間に数分ごとにタスク スケジュール crontab を自動的に実行する方法

>>:  MySQLデータベースとOracleデータベース間のバックアップをインポートする

推薦する

新しいユーザーを作成し、MySQLに権限を付与する最も簡単な方法

ユーザーを作成します: 'oukele' によって識別されるユーザー 'ou...

nginx+FastDFS を使ってファイル管理システムを段階的に構築する

目次1. FastDFS の概要1. はじめに2. FastDFSストレージ戦略3. FastDFS...

CocosCreatorでゲームコントローラーを使用する方法

目次1. シーンレイアウト2. ハンドルリスナーを追加する1. イベントの変更を監視する2. 座標設...

HTML チュートリアル、HTML デフォルト スタイル

html 、アドレス、引用、本文、 dd 、 div 、 dl 、 dt 、フィールドセット、フォ...

DockerをインストールしてAlibaba Cloud Image Acceleratorを構成する方法

DockerのインストールDocker はオープンソースなので、Windows システムへのインスト...

デザイナーの「職業病」について

デザイナーは世界で最も繊細で感情的な人々だと私はいつも感じています。私がこう言うときに優越感を感じる...

JS の 3 つの主要な問題、非同期性とシングルスレッドについて簡単に説明します。

目次シングルスレッド非同期シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされ...

Linuxブートサービスを起動する2つの方法

目次rc.local メソッドchkconfig メソッドrc.local メソッド1 まず自動的に...

nginxでgzip圧縮を有効にする手順を完了する

目次序文1. gzip圧縮を設定する2. 詳細設定3. nginxサービスを再起動する要約する序文ウ...

MySQL の乗算と除算の精度の不一致の問題 (除算後の小数点以下 4 桁)

質問今日、プロジェクト関数を書いていたとき、金額の統計計算を行い、単位を変換する必要がありました。そ...

WeChatアプレットキャンバスが署名機能を実装

WeChatアプレットプロジェクトでは、開発モジュールに手書き署名機能が含まれ、WeChatアプレッ...

CSS 使用のヒントのまとめ

最近、ブログのアップグレードを始めました。テンプレートを変更する過程で、CSS スタイルシートを書き...

条件によるMysqlカウントの複数の実装方法を詳細に解説

最近、あるウェブサイトのバックエンドに一連の統計機能を追加していたのですが、条件によるカウントが必要...

jQueryはキャンバスタグを使用して検証コードを描画します

<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。...

Vueはカスタム命令を使用してページの下部に透かしを追加します

プロジェクトシナリオプロジェクトの背景全体にカスタム透かしを追加します。透かしのテキスト、フォントの...