ホームページ  >  記事  >  ウェブフロントエンド  >  vuejsでクラススイッチを実装する方法

vuejsでクラススイッチを実装する方法

藏色散人
藏色散人オリジナル
2021-11-04 15:06:173549ブラウズ

クラス スイッチングを実装する Vuejs メソッド: 1. HTML Web ページ インフラストラクチャを作成する; 2. vue.js を導入する; 3. vue インスタンスを初期化する; 4. イベント @click をボタンにバインドする; 5. を作成する色を切り替えるクラス cgcolor; 6. calssをバインドして判定するにはactiveを使うだけです。

vuejsでクラススイッチを実装する方法

この記事の動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vuejs はクラス スイッチングをどのように実装しますか?

vue はクラス スイッチングを実装します:

最初のステップは、次のことを容易にすることです。コードを作成します。HTML エディターの sublime-text を使用してコードを作成します。詳細は以下のとおりです。

vuejsでクラススイッチを実装する方法

2 番目のステップは、HTML Web ページのインフラストラクチャを作成することです。 vue .js フレームワークを使用したい場合は、まず vue.js を紹介します。公式 Web サイトにアクセスして、オンラインの vue.js ライブラリをダウンロードまたは参照できます。詳細は次のとおりです

vuejsでクラススイッチを実装する方法

vuejsでクラススイッチを実装する方法

vue.js を導入した後の 3 番目のステップでは、達成したいサンプルの効果について簡単に説明します。

(ブラック ボックスがあります) 、ボタンをクリックすると、黒いボックスが青に変わり、もう一度ボックスをクリックすると、ボックスが黒に戻り、このようにループします。)詳細なコードは次のとおりです

、詳細は次のとおりです以下

vuejsでクラススイッチを実装する方法

#3 番目のステップでは、作成後に vue インスタンスを初期化します。詳細なコードと効果は以下のとおりです。

vuejsでクラススイッチを実装する方法

5 番目のステップでは、イベント @click をボタンにバインドし、次に詳細を示すようにメソッドにイベント メソッドを記述します。図

vuejsでクラススイッチを実装する方法

6 番目のステップ、色を切り替えるクラス cgcolor を作成し、データ内で新しいステータス ラベル active を作成し、 active を使用して calss をバインドして判断します。詳細は次のとおりです。

vuejsでクラススイッチを実装する方法

#7 番目のステップ、最終的な効果は次のとおりです。1 回クリックするとボックスが青になり、もう一度クリックすると黒に変わります。詳細は以下のとおりです

vuejsでクラススイッチを実装する方法 #推奨される学習: 「

最新の 5 つの vue.js ビデオ チュートリアル セレクション

以上がvuejsでクラススイッチを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。