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（プロセス管理ツール）のインストールと使用
推薦する
Tomcat を IDEA にダウンロード、インストール、デプロイするチュートリアル (IDEA の 2 つのホット デプロイ設定方法付き)
目次Tomcat ダウンロードチュートリアルTomcat インストールチュートリアルTomcat の...
Linux/CentOS システムでネットワーク時間を同期する 2 つの方法の詳細な説明
ハードウェア上の理由により、機械は標準時間にある程度追いつけない場合があり、その誤差は 1 か月で数...
MySQL 5.7.20 の解凍バージョンをインストールするための詳細な手順 (2 つの方法)
Windows 64ビットでのMySQLのインストールについて説明します。5.7以降、MySQLの...
MySQLデータベースとOracleデータベース間のバックアップをインポートする
OracleデータベースからエクスポートされたデータをMySqlデータベースにインポートします。 1...
WeChatミニプログラムユーザー認証による携帯電話番号の取得（getPhoneNumber）
序文ミニプログラムには、ユーザーを取得するための非常に便利な API があり、getPhoneNum...
ネイティブ JavaScript メッセージボード
この記事では、参考までにメッセージボードを実装するためのJavaScriptの具体的なコードを紹介し...
ボタンをEnterキーに関連付けるjsコード
コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...
MySQL 結合テーブルクエリの基本操作 左結合のよくある落とし穴
概要中小規模のプロジェクトでは、特にレポートを作成するときに、結合テーブル クエリが非常に一般的な操...
CSS継承方法
次の背景画像を持つ div があるとします。 次の反射効果を作成します。 方法はたくさんありますが、...
Reactコンポーネントをフルスクリーンにする方法
導入この記事は、 React + antdをベースにして、完全な全屏demoを紹介します。その理由は...
Windows 7 の mysql6.x で中国語の文字化けが発生する問題に対する完璧な解決策
1. コマンドラインでMySQLサービスを停止します: net stop mysql stop my...
Windows環境でのMySQL 8.0.13無料インストールバージョンの設定チュートリアル
目次圧縮ファイルをダウンロードするアドレス: https://dev.mysql.com/downl...
dockerでsshd操作を有効にする
まず、docker に openssh-server をインストールします。インストールが完了したら...
HTMLフォーム要素の包括的な理解
以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピー<!DO...