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 のインストールに関する詳細なチュートリアル
推薦する
MySQL スケジュールタスク例チュートリアル
序文MySQL 5.1.6 以降、非常にユニークな機能であるイベント スケジューラが追加されました。...
経験者のHTMLの書き方と理由の分析
1. ナビゲーション: 順序なしリストとその他のラベル要素ナビゲーションを記述するために最も一般的に...
トランザクション分離レベルのMySQLケース分析
目次1. 理論シリアル化可能繰り返し読み取りコミットされた読み取りコミットされていない読み取り2. ...
Javascript 文字列メソッドの詳細な説明
目次文字列の長さ: 長さcharAt() charCodeAt()文字列に値が含まれているかどうかを...
Dockerコンテナのいくつかの保存方法の詳細な説明
目次前面に書かれた複数のストレージマウント方法1.バインドマウント2. 巻数3.tmpfsマウントス...
Linuxダイナミックリンクライブラリの使用
通常のプログラムと比較すると、ダイナミック リンク ライブラリにはメイン関数がなく、一連の関数の実装...
MySQLのクラスタ化インデックスと非クラスタ化インデックスの詳細な説明
1. クラスター化インデックステーブル データはインデックスの順序で保存されます。つまり、インデック...
Tomcatがセッションを管理する方法の例
ConcurrentHashMapを学習しましたが、どのように適用すればよいかわかりませんか? To...
iOS、Android、ミニプログラムアプリの敷居の低い開発のためのフロントエンドフレームワークを詳しく解説
現在、クロスプラットフォーム開発技術はもはや新しい話題ではありません。市場にはいくつかのオープンソー...
MySQLデータベースパラダイムの詳細な説明
序文：データベースパラダイムについてはよく耳にしていましたが、詳細まで理解したことはありませんでした...
親要素を基準にCSSの位置を絶対的に設定する方法についての簡単な説明
ご存知のとおり、CSS の絶対位置はデフォルトでドキュメントに応じて設定されます。たとえば、posi...
CSSを使用して3Dフォトウォール効果を作成する
CSS を使用して 3D フォト ウォールを作成します。具体的なコードは次のとおりです。 <!...
Reactの二次連携を実現する方法
この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...
ノードの対応するバージョンに関する簡単な説明 node-sass sass-loader
目次ノードのバージョンが一致しない、ノードをアップグレードまたはダウングレードするnvm を使用して...
MySQL スロークエリログの詳細な理解
目次スロークエリログとは何ですか?スロークエリを有効にする方法ログ分析ツール mysqldumpsh...