Vue.jsはシンプルなタイマー機能を実装します
|
この記事では、参考までに、簡単なタイマー機能を実装するためのvue.jsの具体的なコードを紹介します。具体的な内容は次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<title>レッグレイズカウンター</title>
<script src="/static/vue/vue.js"></script>
<script src="/static/vue/index.js"></script>
<script src="/static/vue/vue-resource.min.js"></script>
<link rel="スタイルシート" href="/static/vue/index.css" >
</head>
<スタイル タイプ="text/css">
.el-コンテナ{
マージン:100px 30px 30px 30px ;
高さ:1800ピクセル;
背景色: #B3C0D1;
}
.el-ボタン{
高さ:1800ピクセル;
幅:100%;
フォントサイズ:300px;
}
</スタイル>
<本文>
<div id="アプリ">
<el-コンテナ>
<el-button type="primary" :disabled="!canclick" @click="add">
{{ num }} <el-divider></el-divider> {{ content }}
</el-button>
</el-コンテナ>
<ビデオref="通知">
<source src="カウントダウン.m4a" />
</ビデオ>
</div>
<スクリプト>
新しいVue({
el: '#app',
データ: 関数 () {
戻る {
番号:0,
クリック可能:true、
コンテンツ:"カウンター",
カウント:10
}
},
マウントされた(){
this.getnum() //すべてのオプションを取得},
方法:{
getnum:関数(){
this.$http.get('/api/count/count.php').then(function(res){
this.num=res.data
}、関数（）{
console.log('リクエストの処理に失敗しました')
});
},
追加:関数(){
this.canclick=false
this.$refs.notify.play()
this.content = this.count + 末尾の後の's'
クロックをsetInterval(()=>{とする
this.count--
this.content = this.count + 末尾の後の's'
if(this.count==0){
this.content="カウンター"
クリア間隔(クロック)
this.canclick=true
このカウント = 10
}
},850);
this.$http.get('/api/count/add.php?num='+this.num).then(function(res){
this.num=res.data
}、関数（）{
console.log('リクエストの処理に失敗しました')
});
}
}
})
</スクリプト>
</本文>
</html>効果は以下のとおりです
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: linxu での Svn ワンクリック インストール シェル スクリプトの詳細な説明
>>: WINDOWS での MYSQL のインストールに関する詳細なチュートリアル
推薦する
Prometheusコンテナのデプロイメントのための実用的なソリューション
環境ホスト名IPアドレス仕えるプロメテウス192.168.237.137プロメテウス、グラファナノー...
Dockerイメージ送信コマンドcommitの動作原理と使い方の詳細な説明
ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを D...
Zabbix は DingTalk のアラーム機能を画像付きで設定します
実装のアイデア:まず、アラーム情報にはitemidが必要です。これは前提条件です。情報に渡されるパラ...
Windows 10 で MySql の解凍バージョンをインストールして構成する方法のチュートリアル
Windows 10 で MySql データベースの解凍バージョンをインストールするステップ 1: ...
MySQL 5.7.29 + Win64 解凍バージョンのインストールチュートリアル（画像とテキスト付き）
公式サイトをダウンロード自分に合ったバージョンを選択してダウンロードしてください。 ダウンロードをク...
Viteは仮想ファイルの実装を導入します
目次背景仮想ファイルのインポート例書類タイプスクリプトのサポート要約する背景新しいプロジェクトで v...
MySQL ステートメントロックの実装の分析
概要: 2 つの MySQL SQL ステートメント ロックの分析次のSQL文にどのようなロックが追...
完璧なアロエベラジェルを選ぶには？完璧なアロエベラジェルの本物と偽物の見分け方
最新のパーフェクト アロエ ベラ ジェルのパッケージ ボックスには、赤いフォントで完璧な英語の文字が...
Linux での grep コマンドの使い方の詳細な説明
Linux grep コマンドLinux の grep コマンドは、ファイル内の条件を満たす文字列を...
この記事では、MySQLのマスタースレーブ同期の原理を説明します。
目次MySQL マスタースレーブ同期原理の簡単な分析1. マスタースレーブとは何ですか? 2. 主従...
Chromeの最小フォントサイズ制限12pxに対する最終的な解決策
ウェブサイトを作成するユーザーの多くが、このような問題に遭遇すると思います。Chrome のデフォル...
Webpack5-react スキャフォールディングをゼロから構築するための実装手順 (ソースコード付き)
目次ウェブパック5公式スタート建築ガイド構築を開始する依存する準備が完了したら、プロジェクトの構築を...
HTML コード内のスペースと空白行についての簡単な説明
HTML コード内の連続するスペースまたは空白行 (改行) はすべて 1 つのスペースとして表示され...
MySQLのMVCCマルチバージョン同時実行制御の実装
1 MVCCとは何かMVCC の正式名称は、マルチバージョン同時実行制御です。データベースへの同時ア...
Docker Consul の概要とクラスター環境構築手順（グラフィカルな説明）
目次1. Dockerコンサルの概要2. nginxとconsulをベースにした自動検出と高可用性の...