ホームページ >ウェブフロントエンド >Vue.js >vuejsでクラススイッチを実装する方法
クラス スイッチングを実装する Vuejs メソッド: 1. HTML Web ページ インフラストラクチャを作成する; 2. vue.js を導入する; 3. vue インスタンスを初期化する; 4. イベント @click をボタンにバインドする; 5. を作成する色を切り替えるクラス cgcolor; 6. calssをバインドして判定するにはactiveを使うだけです。
この記事の動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。
vuejs はクラス スイッチングをどのように実装しますか?
vue はクラス スイッチングを実装します:
最初のステップは、次のことを容易にすることです。コードを作成します。HTML エディターの sublime-text を使用してコードを作成します。詳細は以下のとおりです。
2 番目のステップは、HTML Web ページのインフラストラクチャを作成することです。 vue .js フレームワークを使用したい場合は、まず vue.js を紹介します。公式 Web サイトにアクセスして、オンラインの vue.js ライブラリをダウンロードまたは参照できます。詳細は次のとおりです
vue.js を導入した後の 3 番目のステップでは、達成したいサンプルの効果について簡単に説明します。
(ブラック ボックスがあります) 、ボタンをクリックすると、黒いボックスが青に変わり、もう一度ボックスをクリックすると、ボックスが黒に戻り、このようにループします。)詳細なコードは次のとおりです
、詳細は次のとおりです以下
#3 番目のステップでは、作成後に vue インスタンスを初期化します。詳細なコードと効果は以下のとおりです。 5 番目のステップでは、イベント @click をボタンにバインドし、次に詳細を示すようにメソッドにイベント メソッドを記述します。図 6 番目のステップ、色を切り替えるクラス cgcolor を作成し、データ内で新しいステータス ラベル active を作成し、 active を使用して calss をバインドして判断します。詳細は次のとおりです。 #7 番目のステップ、最終的な効果は次のとおりです。1 回クリックするとボックスが青になり、もう一度クリックすると黒に変わります。詳細は以下のとおりです#推奨される学習: 「
最新の 5 つの vue.js ビデオ チュートリアル セレクション以上がvuejsでクラススイッチを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。