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データベース間のバックアップをインポートする

推薦する

Linx awk入門チュートリアルの詳細な説明

Awk はテキスト ファイルを処理するためのアプリケーションであり、ほぼすべての Linux システ...

vue2.x の徹底研究 - h 関数の説明

目次解決、要約: vue プロジェクト。 .vue ファイルのテンプレート内に記述されたコードは、w...

nginxサーバーのダウンロード、インストール、使用方法の詳細な説明

ダウンロードhttp://nginx.org/en/download.html解凍ダウンロードしたn...

モバイル Web WAP には Bootstrap と jQuery Mobile のどちらを使用すべきか

問題を解決するBootstrap は、次の問題を解決する CSS フレームワークです。デバイス間での...

Linux sedコマンドの使用

1. 機能紹介sed (Stream EDitor) は、コンテンツを 1 行ずつ処理するストリーム...

CSS3 はアニメーション属性を使用してクールな効果を実現します (推奨)

animation-name アニメーション名。複数のアニメーションがバインドされていることを示す...

Linux でジャンプ サーバー経由でリモート サーバーに接続し、ファイルを転送する方法

最近、Linux ホストに環境を展開する際に多くの問題に遭遇しました。最初の問題は、ジャンプ サーバ...

Linuxカーネルマクロcontainer_ofの詳細な分析

1. 前述の通り数年前、Linux ドライバーのコードを読んでいたときにこのマクロを見ました。長い間...

埋め込みJavaScriptと外部リンクの基本的な応用方法

目次埋め込みJavaScriptと外部リンクの基本的な応用JavaScript の記述方法には、イン...

JavaScript を使用して動的な QQ 登録ページを作成する

目次1. はじめに1. 基本レイアウト2. 写真を自動的に切り替える3. コンテンツを追加する4. ...

Linux にソフトウェアをインストールするときにソフトウェア パッケージが存在しない問題を解決する方法

ソフトウェア パッケージが存在しない場合は、インストールされているソフトウェアのソフトウェア ソース...

Linuxアカウントファイル制御管理の詳細な手順

Linux システムでは、ユーザーが手動で作成したさまざまなアカウントに加えて、システムまたはプログ...

背景とリンクとして画像を書き込む方法(背景画像+リンク)

写真を背景にしてリンクを記載します。たとえば、ウェブサイトのロゴ画像などです。例: ポテトのロゴ画像...

JavaScript関数導入の詳しい説明

目次機能紹介関数関数の作成コンストラクタは関数を作成する関数宣言は関数を作成する関数式関数を作成する...