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 悲観的ロックと楽観的ロックの実装
目次序文実際の戦闘1. ロックなし2. 悲観的ロック3. 楽観的ロック要約する序文悲観的ロックと楽観...
Vue 手書き読み込みアニメーション プロジェクト
ページが応答しない場合、白い画面が表示されないように、読み込みアニメーションを表示するのがユーザーフ...
HTMLを使用してシンプルなメールテンプレートを作成する
今日は、「ローテク」の問題について書きたいと思います。ちなみに、私は JavaScript Week...
VMware での Ubuntu Docker のインストール (コンテナ構築)
1. マインドマップ 2. コンテナの構築方法2.1 実験環境の準備（１）環境選択管理ツール: D...
あまり知られていない JS の問題: [] == ![] は true ですが、{} == !{} は false です
console.log( [] == ![] ) // 真 console.log( {} == ...
Linux sar コマンドの使用方法とコード例の分析
1. CPU使用率sar -p (一日中表示) sar -u 1 10 (1: 1秒ごと、10: 1...
Expressを使用してプロジェクトを自動的にビルドするNode.jsのプロセス全体
1. Expressライブラリとジェネレータをインストールするcmdを開いて、次のコマンドを入力しま...
Vueはテーマ切り替えのための複数のアイデアを実装します
目次テーマを動的に変更する最初の方法: 動的コンポーネント2番目の方法はルーティング分離です要約する...
Linux環境でグラフデータベースneo4jを構築する方法の説明
Neo4j (Nosql の 1 つ) は、高性能なグラフ データベース (分散をサポートしていませ...
Flexレイアウトを使用してヘッドの固定コンテンツ領域のスクロールを実現する方法
ページ ヘッダーの固定レイアウトは、以前は position:fixed を使用して実装されていまし...
Vue3 の組み合わせ API における setup、ref、reactive の完全な使用方法
1. セットアップを始める次のコード関数を簡単に紹介します。 ref 関数を使用して変数の変更を監視...
CSS子要素選択親要素の実装
通常、CSS セレクターは上から下に選択し、親要素を介して子要素を選択します。では、子要素を介して親...
Webフロントエンドベクターアイコンの使い方
序文フロントエンドページを書くとき、小さなアイコンなどの画像を使うことが多いです。画像を使うとコード...
モバイルブラウザが位置をサポートしない場合の解決策: 修正
具体的な方法は以下の通りです。 CSSコードコードをコピーコードは次のとおりです。 .wap_bot...
Reactエラー境界コンポーネント処理
React 16の内容です。最新技術ではありませんが、ドキュメントで調べるまであまり話題に上がらなか...