Vueはプログレスバーの変更効果を実現します
|
この記事ではVueを使ってプログレスバーの変更を簡単に実装してみましたので参考にしてください。具体的な内容は以下のとおりです。 まず、エフェクト画像の波:
マイナスをクリックすると10%ずつ減ります
値が 0% に減少すると、マイナス ボタンは非表示になります。
次に「再起動」をクリックして初期状態に戻します
さっそくコードを見てみましょう
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ホーム</title>
<link rel="スタイルシート" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<本文>
<div id="vue-app">
<div class="プロセス">
<div v-bind:style="{width: health+'%'}"></div>
</div>
<div class="bu">
<button v-on:click="sub" v-show="!eable">減算</button>
<button v-on:click="reset">再起動</button>
</div>
</div>js:
<script src="app.js"></script>
</本文>
</html>
新しいVue({
el:"#vue-app",
データ：{
体力: 100、
有効: false
},
方法:
サブ:関数(){
this.health -= 10;
if(this.health <= 0){
this.eable = true;
}
},
リセット:関数(){
this.health = 100;
this.eable = false;
}
}
});CS: ...
。プロセス{
幅: 250ピクセル;
高さ: 30px;
マージン: 0 自動;
境界線: 黒 4px 実線;
}
.process div{
高さ: 30px;
背景: 赤;
}
.bu{
幅: 250ピクセル;
マージン: 20px 自動;
}
.bu ボタン{
マージン: 0 20px;
}簡単な実装のアイデアは次のとおりです。 v-bind:style を使用して、width の値を health にバインドします。減少する場合は、10 ずつ減少します。0 に減少すると、減少ボタンを非表示にします。 非表示にする場合は、v-show に応じて状態変数を使用して制御できます。true のときは表示され、false のときは非表示になります。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL の起動オプションとシステム変数の例の詳細な説明
>>: Tencent Cloud 上で Hadoop 3.x 疑似クラスターを構築する方法を説明します
推薦する
Nginxはhttpリクエスト実装プロセス分析を処理する
Nginxはまず、設定ファイル内のどのserver{}ブロックを処理に使用するかを決定します。次のs...
MySQL データ アーカイブ ツール mysql_archiver の詳細な説明
目次I. 概要2. pt-archiverの主なパラメータ3. mysql_archiverのインス...
HTML テーブル マークアップ チュートリアル (41): テーブル ヘッダーの幅と高さの属性 WIDTH、HEIGHT
デフォルトでは、ヘッダーの幅と高さはコンテンツに応じて自動的に調整されます。ヘッダーの幅と高さを手動...
DOCTYPEタイプの詳細な紹介
<br />通常、HTML では次の方法で DOCTYPE を宣言します。 <!D...
一般的なフロントエンドJavaScriptメソッドのカプセル化
目次1. 値を入力し、そのデータ型を返す** 2. アレイ重複排除3. 文字列の重複排除4. ディー...
JavaScriptはシンプルな計算機能を実装します
この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...
MySQL 8.0.21 のインストールと設定方法のグラフィックチュートリアル
MySQL 8.0.21のインストールと設定方法を記録してみんなで共有します。 1. ダウンロード1...
弾力性のあるナビゲーション効果を実現するJavaScript
この記事では、弾性ナビゲーション効果を実現するためのJavaScriptの具体的なコードを参考までに...
Nginx の一般的な設定とテクニックの概要
序文この記事では、Nginx の一般的な、実用的で興味深い構成をいくつか紹介します。この記事を読んだ...
Linux で SpringBoot jar プログラム デプロイメント シェル スクリプトを起動および停止する方法
では早速、コードをお見せしましょう。具体的なコードは次のとおりです。 #!/bin/bash cd ...
テキストまたはJSONを返すようにnginxを設定する方法
特定のインターフェースをリクエストするときに、指定されたテキスト文字列または JSON 文字列を返す...
MySQL DEFINER の使用方法の詳細な説明
目次序文： 1.DEFINERの簡単な紹介2. いくつかの注意点要約:序文： MySQL データベー...
Windows 64 ビット版 MySQL 5.7 以降の解凍パッケージにデータディレクトリと my-default.ini がなく、サービスが起動できない問題の簡単な解決方法 (問題概要)
私は SQL の初心者で、オープンソースのインストールは非常に簡単だと思っていましたが、その過程でい...
nginx+lua を使用した単一マシンでの何万もの同時接続の実装
nginx は弊社で最もよく使用されるサーバーで、コンテンツ配信やリバース プロキシによく使用されま...
MySQL クエリ データベース容量方法手順
すべてのデータベースの合計サイズを照会する方法は次のとおりです。 mysql> informa...