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がトランザクション分離を実装する方法の簡単な分析
デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...
Nginx を Web サーバーとして使用する際に、次の問題が発生しました。 1. nginxの起動...
フィルター属性は要素の視覚効果を定義しますぼかし画像にガウスぼかしを適用します。 「半径」の値は、ガ...
目次1. 正規表現の作成2. 使用モード2.1 シンプルモードの使用2.2 特殊文字の使用3. 応用...
目次質問:ケース(1)子スレッドを作成する前にフォークするケース(2)子スレッドを作成した後にフォー...
序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...
MySQL ロックの概要他のデータベースと比較すると、MySQL のロック メカニズムは比較的単純で...
目次可変タイプとストレージスペーススタックメモリとヒープメモリ基本的なデータ型参照タイプグラフィック...
MySQL 開発チームは、2019 年 10 月 14 日に MySQL 8.0.18 GA バージ...
主キーとは何ですか?主キーは、テーブル内の各タプル (行) を一意に識別するテーブル内の列です。主キ...
序文scp は secure copy の略です。scp は、Linux システムの ssh ログイ...
ドキュメント モードには次の 2 つの機能があります。 1. HTML文書を解析するためにどのHTM...
innobackupex を使用してバックアップする際に MySQL がサーバーに接続できない場合は...
優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...
序文最近、偶然 MySQL の coalesce を発見しました。ちょうど時間があったので、MySQ...