Vue.jsはシンプルなタイマー機能を実装します

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript でシンプルなタイマーを実装する
  • JSはストップウォッチタイマーを実装します
  • JSはsetIntervalタイマーを使用して10秒間のチャレンジを実装します
  • JavaScriptで見栄えの良いストップウォッチタイマーを実装する
  • JavaScript setInterval() と setTimeout() タイマー
  • jsは組み込みタイマーを実装します
  • JavaScriptタイマーとボタン効果設定の詳細な説明

<<:  linxu での Svn ワンクリック インストール シェル スクリプトの詳細な説明

>>:  WINDOWS での MYSQL のインストールに関する詳細なチュートリアル

推薦する

データベース接続のURLの詳細な説明と概要

データベース接続のURLの詳細な説明と概要JDBC URL = プロトコル名 + サブプロトコル名 ...

CSS変換ページめくりアニメーションレコードの実装

ページめくりの問題のシナリオBとCは同じページ（表と裏）にありますページをめくって A をカバーした...

重複したMySQLテーブルをマージして削除する簡単な方法

シナリオ：クロールされたデータは、別のメインテーブルと同じ構造を持つデータテーブルを生成するため、マ...

Linuxの同時実行は簡単です。このようにするだけです

並行処理関数 i の `grep server /etc/hosts | awk '{pri...

nginx リバース プロキシでの proxy_pass の実装

フォーマットはシンプルです: proxy_pass URL; URL には、送信プロトコル (htt...

img usemap 属性 中国地図リンク

HTML img タグ: Web ページに導入される画像を定義します。興味深い usemap 属性も...

負の距離（共感） - 相互影響の反復プロセス

ネガティブな距離は共感を意味します。序文（疑問の提起）：プロダクトマネージャーは機能を把握します。機...

Vueのイベント処理とイベント修飾子の詳細な説明

<div id="ルート"> <h2>頑張れ、{{na...

OpenLayers 3 のベクターマップソースの読み込みの問題を解決する

1. ベクターマップベクター グラフィックスは直線と曲線を使用してグラフィックスを表します。これらの...

SELINUXの動作原理の詳細な説明

1. はじめにSELinux が Linux にもたらす主な価値は、柔軟で構成可能な MAC メカニ...

CentOS 6.6 ソースコードのコンパイルと MySQL 5.7.18 のインストールチュートリアルの詳細な説明

1. ユーザーとグループを追加する1. mysqlユーザーグループを追加する # グループ追加mys...

Nginx ベースの HTTPS ウェブサイトを設定する手順

目次序文：暗号化アルゴリズム: 1. HTTPS の概要2. NginxはHTTPSウェブサイト設定...

HTML Webページ作成チュートリアル iframeタグを慎重に使用してください

iframe を使用すると、他の Web サイトのページを簡単に呼び出すことができますが、注意して使...

Linux でファイルプレフィックスを一括で追加する方法

フォルダー内のすべての txt ファイルのファイル名の前に「gt_」を追加する必要があります。つまり...

リモートDockerを使用した統合テスト環境の構築手順

需要背景チームには統合テストが必要であり、そのためには、mysql や rabbitmq などのミド...