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 疑似クラスターを構築する方法を説明します
推薦する
ウェブページレイアウトデザインのシンプルな原則
この記事では、Web ページ レイアウト デザインのいくつかの簡単な原則をまとめ、Web ページ デ...
Ubuntu 20.04 をインストールした後に行うべきこと (初心者向けガイド)
Ubuntu 20.04 がリリースされ、多くの新機能が導入されましたが、慣れていない機能も多くあ...
XHTML+CSS Web ページ作成における美しいスタイルシートの適用
これはかなり前に書かれた記事です。今となっては、その中の考え方は学ぶ価値があるように思えます。jb5...
6秒でMySQLに100万件のレコードを挿入する方法を教えます
1. アイデアMySQL に 1,000,000 件のレコードを挿入するのにたった 6 秒しかかかり...
MySQL データベースの最適化: テーブルとデータベースのシャーディング操作の詳細な説明
この記事では、例を使用して、MySQL データベースの最適化のためのテーブルおよびデータベース シャ...
onfocus="this.blur()" は視覚障害のあるウェブマスターに嫌われている
スクリーン リーダー ソフトウェアの操作ページについて話しているとき、彼はフロントエンドの学生たちに...
ウェブサイトの高速化における CDN、SCDN、DCDN の違いは何ですか?どうやって選ぶ？
1. CDNこれは、Web サイト上で最もよく使用される加速機能です。分散サーバー レイアウトによ...
JavaScript セレクター関数 querySelector および querySelectorAll
目次1. querySelectorは単一の要素を照会する1. ドキュメントインスタンスの呼び出し2...
mysql 5.7.18 winx64 パスワード変更
MySQL 5.7.18 が正常にインストールされた後、バージョン 5.7 では空のパスワードでのロ...
JSはプログレスバーのスムーズバージョンの詳細な計画を実装します
進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...
Ubuntu で FTP サーバーを構築する方法の詳細な説明 (成功保証)
1. 今日の午後、コースの要件により、Ubuntu で FTP サーバーを設定する実験を行う必要が...
Vue3.0 ルーティング自動インポート方法の例
1. 前提条件インポートには require.context メソッドを使用します。vite で作成...
ホストサービスにアクセスするDockerでのサービスの実装
目次1. シナリオ2. 解決策3. 結論4. 参考文献1. シナリオ日常の開発およびテスト作業には ...
MySQLリモート接続を有効にする方法
セキュリティ上の理由から、MySql-Server はローカル マシン (localhost、127...
純粋な CSS を使用してユーザーが Web ページのコンテンツをコピーするのを防ぐ方法
序文私自身の個人ブログを入力しているときに、ブログの詳細ページでさまざまなコンテンツをコピーするさま...