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 疑似クラスターを構築する方法を説明します
推薦する
Docker コンテナで DockerFile を使用して複数の Tomcat サービスをデプロイする手順
1. [admin@JD ~]$ cd opt #ルートディレクトリにoptと入力2. [admin...
TypeScript のマップされた型とより優れたリテラル型推論について説明します。
目次概要マップされた型を使用して Object.freeze() を構築するマッピングタイプの構文は...
ドラミング効果を実現するJavascript
この記事では、ドラミング効果を実現するためのJavascriptの具体的なコードを参考までに紹介しま...
MySQLのさまざまなロックに関する詳細な理解
目次ロックの概要ロックの分類データベース操作の粒度データ操作の種類MySQL ロックさまざまなストレ...
CentOS7でXShellとネットワーク設定を接続する方法
1. Linuxネットワーク構成ネットワークを構成する前に、まずローカル IPv4 アドレスやデフォ...
MySQL で sum 関数を使用する例のチュートリアル
導入今日は、MySQL の sum 関数の使い方を紹介します。この関数は、MySQL データベースを...
Vue の this.$router と this.$route の違いと push() メソッド
公式文書には次のように記されている。ルーターを挿入することで、どのコンポーネントでも this.$r...
MYSQL ログとバックアップおよび復元の問題の詳細な説明
この記事では、参考までにMYSQLログとバックアップとリストアについて紹介します。具体的な内容は以下...
Linux システムで PATH 環境変数を設定する方法 (3 つの方法)
1. Windows システムでは、JDK のインストールなど、多くのソフトウェアのインストールで...
jsのイベントオブジェクトを深く理解しましょう
JS でよく使用されるイベントは次の通りです。ページイベント: load;フォーカス イベント: フ...
MySQLにおける区切り文字の定義と機能の詳細な説明
MySQL を初めて学ぶときは、区切り文字の本当の目的を理解していないかもしれません。区切り文字は、...
ウェブデザインの達人がよく使うレスポンシブフレームワークを共有する（要約）
この記事では、Web デザインの達人がよく使用するレスポンシブ フレームワーク (概要) を紹介し、...
メタタグコードを使用して、360 デュアルコアブラウザを互換モードではなく高速モードにデフォルト設定します。
あるウェブサイトでは、ユーザーが WebKit カーネルでページを開くことを期待して、HTML5 と...
Ubuntu 18.04 システムでの Redis および phpredis 拡張機能のインストールと設定の詳細な説明
この記事では、Ubuntu 18.04 に Redis と phpredis 拡張機能をインストール...
nginxを使用して取得したIPアドレスが127.0.0.1である問題を解決する
IPツールを取得 lombok.extern.slf4j.Slf4j をインポートします。 org....