Vueメソッドに基づくシンプルなタイマーの実装
|
Vueのシンプルなタイマーを参考にしてください。具体的な内容は以下のとおりです 原理: setInterval は、1 秒 (設定可能な時間間隔) ごとに自己増分メソッドを実行するために使用され、clearInterval は、タイマーの機能を実現するために継続的に実行される自己増分メソッドを停止するために使用されます。 Vue部分では、Vueのリアルタイムリフレッシュビュー機能を利用して、自動インクリメント変数の値をフロントエンドに表示します。
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>時間</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<本文>
<div id="アプリ">
<input type="button" name="" id="" value="開始" @click="開始"/></br>
<h1>{{番号}}</h1>
<input type="button" name="" id="" value="一時停止" @click="停止"/></br>
</div>
<script type="text/javascript">
var vm = 新しい Vue({
el:"#アプリ",
データ：{
番号:0
},
方法:{
開始:関数(){
時間 = setInterval(関数(){
vm.number++
},1000)
},
停止:関数(){
クリア間隔(時間)
}
}
})
</スクリプト>
</本文>
</html>レンダリング
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL デュアルマシン ホットスタンバイ実装ソリューション [テスト可能]
>>: Linux運用保守ツールSupervisor（プロセス管理ツール）のインストールと使用
推薦する
Vue フロントエンドと Django バックエンドを使用して、一定期間内のデータをクエリする方法
序文開発プロセスでは、すべてのデータではなく特定の期間内のデータをクエリするなど、クエリのフィルタリ...
MySQL カーソルの概念と使用法の詳細な説明
この記事では、例を使用して MySQL カーソルの概念と使用方法を説明します。ご参考までに、詳細は以...
Windows 10 で Hyper-V サービスをシャットダウンするいくつかの方法
VMware Workstation を使用して Windows 10 で仮想マシンを開くと、VMw...
Tomcatのクラスロードメカニズムのプロセスとソースコード分析
目次序文1. Tomcat クラスローダー構造図: 2. Tomcat のクラスロードプロセスの説明...
MySQL 8.0 バージョンで getTables がすべてのデータベース テーブルを返す問題の簡単な分析
序文この記事では、主にライブラリ内のすべてのテーブルを返すMysql8.0ドライバgetTables...
ハイパーリンクを使用してリンクファイルを開く HTML 方式の紹介
a および href 属性 HTML では、英語ではアンカーと呼ばれるハイパーリンクを表すために &...
HTML フォーム送信アクションと URL ジャンプアクションの違い
フォームのアクションは URL ジャンプとは異なります。フォームはバックグラウンドにデータを渡すこと...
MySQL 8.0 オンライン DDL クイック列追加の概要
目次問題の説明MySQLオンラインDDLで列を追加する従来の方法01 コピー方法02 インプレースメ...
Vue が学ぶべき知識ポイント: forEach() の使用
序文フロントエンド開発では、目的のコンテンツを取得するためにループをトラバースする必要がある状況に頻...
Docker を使用して Spring Boot をデプロイする方法の例
ここでは主に、スタンドアロンのプログラムを生成できるspring-bootと、Mavenプラグインd...
Zabbix の psk 暗号化と zabbix_get 値の組み合わせ
Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbix...
WeChatミニプログラムページとコンポーネント間の情報伝達と機能呼び出し
今回は、私自身の開発経験を踏まえて、以下の観点で関連内容を解説します。ページからコンポーネントにデー...
モバイルデバイスでのフリーズ問題に対する CSS3 ソリューション (アニメーション パフォーマンスの最適化)
1. CSS、jQuery、Canvasを使用してアニメーションを作成する1. キャンバス利点: ...
ウェブサイトのユーザビリティとコンバージョン率を向上させる 25 のツール
ウェブサイトの場合、ユーザビリティとは、ユーザーが必要な情報を効果的に見つけたり、タスクを完了したり...
Vueは動的に生成されたコンポーネントをドラッグアンドドロップする要件を実装します
目次製品要件アイデア問題ライブラリ選択をドラッグコンポーネントを生成する方法コンポーネントを生成する...