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 疑似クラスターを構築する方法を説明します
推薦する
MySQL は対応するクライアント プロセスにどのように接続しますか?
質問特定の MySQL 接続について、それがどのクライアント プロセスからのものであるかをどのように...
@Font-face の基本的な使い方と、すべてのブラウザと互換性を持たせる方法
@Font-face 基本紹介: @font-face は、Web ページにカスタム フォントを表示...
Docker コンテナ入門から夢中になるまで（推奨）
1. Docker とは何ですか?仮想マシンについては誰もが知っています。Windows に Li...
Podmanはコンテナを自動的に起動し、Dockerと比較します
目次1. podmanの紹介2. Dockerと比較した利点3. 互換性4. バックグラウンド サー...
ネットワークセグメント内の IP アドレスに対する Nginx の接続制限設定の詳細な説明
Nginx におけるいわゆる接続制限は、実際には TCP 接続、つまり 3 ウェイ ハンドシェイク後...
CSS ファンタスティックボーダーアニメーション効果の実装
今日、私はブログサイト shoptalkshow を閲覧していて、非常に興味深いこのインターフェース...
CSS でのシングル div 描画テクニックの実装
純粋な HTML + CSS を使ってドラえもんの絵を描くなど、CSS 描画に関する記事をよく見かけ...
Dockerコンテナが停止できない問題の解決方法
解決策は次のとおりです。 1. コンテナを強制削除する docker rm -f ジェンキンス2. ...
純粋な CSS を使用してユーザーが Web ページのコンテンツをコピーするのを防ぐ方法
序文私自身の個人ブログを入力しているときに、ブログの詳細ページでさまざまなコンテンツをコピーするさま...
MySQLクエリ速度を最適化する方法
前の章では、高性能な MySQL に不可欠な、最適化されたデータ型の選択方法とインデックスの効率的な...
Linuxで静的ネットワーク接続を構成する方法
Linux システムのネットワーク接続を構成するのは難しい場合があります。幸いなことに、多くの新しい...
Ubuntuで顔認識ログインを実装するための完全な手順
1. Howdyをインストール: howdyプロジェクトアドレス sudo add-apt-repo...
実用的なクイックスタートReactルーティング開発
インストールインストールするには、次のコマンドを入力します。 // ネプ npm で react-r...
myisamchk および mysqlcheck ツールを使用して破損した MySQL データベース ファイルを迅速に修復する方法
サーバーのデータベース ハード ディスク領域がいっぱいだったため、大量のデータの書き込みに失敗し、「...
コード例を通してページ置換アルゴリズムの原理を理解する
ページ置換アルゴリズム: 本質は、限られたメモリをワイヤレス プロセスに対応できるようにすることです...