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 疑似クラスターを構築する方法を説明します
推薦する
jQuery+h5 で 9 マス抽選特殊効果を実現 (フロントエンドとバックエンドのコード)
序文：フロントエンド: jq+h5 で 9 グリッドのダイナミック効果を実現バックエンド: thin...
4つの柔軟なScssコンパイル出力スタイル
多くの人は、Scss を使用する瞬間からコンパイル方法を説明されてきました。したがって、コマンドのコ...
Mysql5.7 のルートパスワードを忘れた場合の対処法 (シンプルで効果的な方法)
前回の記事では、MySQL 5.7でルートパスワードを忘れた場合と、MySQL 5.7でルートパスワ...
Dockerコンテナのネットワークポート設定プロセスの詳細な説明
ネットワークポートの公開実際、Docker にはネットワーク ポートの公開に関わる 2 つのパラメー...
Angularルーティングの基礎の詳細な説明
目次1. ルーティング関連オブジェクト2. ルーティングオブジェクトの場所3. ルーティング構成4....
Vue コンポーネントはどのように解析され、レンダリングされるのでしょうか?
序文この記事では、Vue コンポーネントがどのように解析され、レンダリングされるかを説明します。 V...
Centos8 で yum を使用して rabbitmq をインストールするチュートリアル
/etc/yum.repos.d/フォルダに入るrabbitmq-erlang.repo ファイルを...
HTML の 2 つのタブ ナビゲーション間の競合の解決方法
まず問題の説明から始めましょう:同じページで、1 つのタブに float:left が必要で、もう ...
プロキシはVue3データの双方向バインディングの原理を実現します
目次1. proxy と Object.defineProperty の利点2. プロキシ監視オブジ...
JS で CSS 変数を使用する方法
JS で CSS 変数を使用する方法:export キーワードを使用して、js オブジェクトを le...
Dockerコマンドの学習を1つの記事にまとめる
目次導入ミラーリポジトリログイン引く押す検索ローカル画像管理画像rmiタグ建てる歴史保存負荷輸入コン...
vue-routeルーティング管理のインストールと設定方法
導入Vue Router 、 Vue.jsの公式ルーティング マネージャーです。 Vue.jsのコア...
jQuery を使用して、iframe 下の無効なページ アンカー ポイントの問題を修正する
適用シナリオ: iframe ページにスクロール バーがなく、親ウィンドウにスクロール バーが表示さ...
CSSは複数の要素をボックスの両端に揃える効果を実現します
要素の両端を揃える配置レイアウトは、実際の開発のいたるところで見られます。これは、フレックスレイアウ...
DIVのぼかし機能を実装する方法
マウスを動かしたときにDIVが消えるように手ぶれ補正を使用するdiv タグ自体は onblur イベ...