この記事では、参考までにタイマーを実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux で指定された期間に数分ごとにタスク スケジュール crontab を自動的に実行する方法
>>: MySQLデータベースとOracleデータベース間のバックアップをインポートする
ユーザーを作成します: 'oukele' によって識別されるユーザー 'ou...
目次1. FastDFS の概要1. はじめに2. FastDFSストレージ戦略3. FastDFS...
目次1. シーンレイアウト2. ハンドルリスナーを追加する1. イベントの変更を監視する2. 座標設...
html 、アドレス、引用、本文、 dd 、 div 、 dl 、 dt 、フィールドセット、フォ...
DockerのインストールDocker はオープンソースなので、Windows システムへのインスト...
デザイナーは世界で最も繊細で感情的な人々だと私はいつも感じています。私がこう言うときに優越感を感じる...
目次シングルスレッド非同期シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされ...
目次rc.local メソッドchkconfig メソッドrc.local メソッド1 まず自動的に...
目次序文1. gzip圧縮を設定する2. 詳細設定3. nginxサービスを再起動する要約する序文ウ...
質問今日、プロジェクト関数を書いていたとき、金額の統計計算を行い、単位を変換する必要がありました。そ...
WeChatアプレットプロジェクトでは、開発モジュールに手書き署名機能が含まれ、WeChatアプレッ...
最近、ブログのアップグレードを始めました。テンプレートを変更する過程で、CSS スタイルシートを書き...
最近、あるウェブサイトのバックエンドに一連の統計機能を追加していたのですが、条件によるカウントが必要...
<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。...
プロジェクトシナリオプロジェクトの背景全体にカスタム透かしを追加します。透かしのテキスト、フォントの...