Vueはクラススタイルを使用するいくつかの方法を提供しています 1. ブールまず、 style タグにクラス名がactive のスタイルを記述しましょう。<スタイル> 。アクティブ{ 色: 赤; フォントサイズ: 20px; フォントスタイル: 通常; } </スタイル> script タグにvm インスタンスを作成し、インスタンスのdata センターにisActive:true を書き込みます。true このスタイルを使用することを意味し、 false はこのスタイルを使用しないことを意味します。<script src="js/vue.js"></script> <スクリプト> vm = new Vue({ el:'#app', データ:{ アクティブ:true } </スクリプト> この時点で、タグ内の v-bind ディレクティブでclass クラスを使用しています。<div id="アプリ"> <h1 :class="{active:isActive}">クラス スタイルを参照するためにブール値を使用しています</h1> </div> 出力を表示します。 ![]() ここで、true を false に変更します。 データ:{ アクティブ: false } 出力を表示します。 ![]() 2. 表現v-bind: ディレクティブの後に式を追加し、条件が満たされたときに class を呼び出すことができます。たとえば、データセンター data にオブジェクトの配列があり、それをビューレイヤーにレンダリングします。参照を偶数インデックスで作成したいのです。授業スタイル: <本文> <div id="アプリ"> <ul> <li v-for="(item,index) リスト内">{ <!-- -->{インデックス}}----{ <!-- -->{アイテム名}}</li> </ul> </div> <script src="js/vue.js"></script> <スクリプト> vm = new Vue({ el:"#アプリ", データ:{ リスト:[ {id:1,name:"ジンクス"}, {id:2,name:"ジェイス"}, {id:3,name:"ケイトリン"}, {id:4,name:"蔚"}, ] } }) </スクリプト> li で属性バインディング クラス スタイルを使用します。 <li v-for="(item,index) リスト内" :class="{active: index%2 == 0}"> { <!-- -->{インデックス}}----{ <!-- -->{アイテム名}} </li> 出力は次のようになります。 ![]() また、データ センターに mark を定義し、 mark の値を定義して、行がクラス クラスを個別に参照できるようにすることもできます。<li v-for="(item,index) リスト内" :class="{active: index === mark}"> { <!-- -->{インデックス}}----{ <!-- -->{アイテム名}} </li> vm = new Vue({ el:"#アプリ", データ:{ リスト:[ {id:1,name:"ジンクス"}, {id:2,name:"ジェイス"}, {id:3,name:"ケイトリン"}, {id:4,name:"蔚"}, ]、 マーク:0 } }) この時点では、インデックス 0 のスタイル、つまり最初のスタイルのみが参照されます。 ![]() 3. マルチクラスパッケージ
オブジェクトには複数のクラスを配置できます。ビュー層ではオブジェクト名、 data センターでは複数のクラスを列挙したオブジェクトです。<スタイル> .f50{ フォントサイズ: 50px; } 。青{ 色: 青; } 。背景{ 背景色: 黒; } </スタイル> <本文> <div id="アプリ"> <p :class="classObject">中国語</p> </div> </本文> vm = new Vue({ el:"#アプリ", データ:{ クラスオブジェクト:{ "f50":true、 "青":true, "背景":true } } }) 出力は次のようになります。 ![]() 計算されたプロパティをカスタマイズし、関数にカプセル化して呼び出しを返すこともできます。 vm = new Vue({ el:"#アプリ", 計算:{ // 1. カスタム計算プロパティ名、 // 2. 計算属性が行うことを関数myclass(){にカプセル化します。 戻る { "f50":true、 "青":true, "背景":true } } } }) <p :class="myclass">中国語</p> 出力は一貫している 4. v-bind でクラス class を直接使用できます。.f50{ フォントサイズ: 50px; } 。青{ 色: 青; } 。背景{ 背景色: 黒; } <!-- クラス名は引用符で囲む必要があることに注意してください--> <p :class="['f50','blue','background']">毎週</p> 出力: ![]() Vue でのクラススタイルの使用方法の詳細については、これで終わりです。Vue でのクラススタイルの使用方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: MySQLがトランザクション分離を実装する方法の簡単な分析
この記事では、参考までに、csv中国語データをNavicat for SQLiteにインポートする具...
導入MySQL 5.7 は、SSL/TLS と全体的なセキュリティ開発におけるいくつかの重要な変更に...
目次1. テンプレート2. ジェネリック3. ジェネリック再帰4. デフォルトのジェネリックパラメー...
reactプロジェクトで非常に一般的なシナリオ: const [watchValue、setWatc...
1. オーバーレイの概要オーバーレイとは、その名の通り、別の形で地図上に表示される、覆うことを指しま...
この記事では、小数点付きの星評価を実装するためのVueの具体的なコードを参考までに共有します。具体的...
データのバックアップと復元に関する最初の記事を皆さんに共有します。具体的な内容は次のとおりです。基本...
1. MySQLデータベースにログインするmysql -u ルート -pユーザーテーブルを表示する ...
1 システムのインストール手順OSバージョン:1804イメージのダウンロード: http://cd...
最近、vue について読みました。これまで基本的に見落としていた単一ファイル コンポーネントを見つけ...
目次1. withRouterコンポーネントを使用する2. ルートタグを使用するReactRoute...
目次序文オプションの連鎖ヌル結合呼び出されていない関数のチェック他の序文TypeScript 3.7...
質問: <form...> の下の <input type="hidde...
この記事では、MySQL 8.0のダウンロードとインストールについてご紹介します。具体的な内容は以下...
この記事では、カルーセルマップの効果を実現するためのjsの具体的なコードを参考までに共有します。具体...