Vueでクラススタイルを使用する方法の詳細

Vueでクラススタイルを使用する方法の詳細
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 をよろしくお願いいたします。
以下もご興味があるかもしれません:
  • Vueでクラス名を動的に追加する方法

<<:  CSS の高さの崩壊問題の解決

>>:  MySQLがトランザクション分離を実装する方法の簡単な分析

推薦する

Navicat for SQLite で中国語データを CSV にインポートする方法

この記事では、参考までに、csv中国語データをNavicat for SQLiteにインポートする具...

MySQL 5.7 の一時テーブルスペースを使用して落とし穴を回避する方法

導入MySQL 5.7 は、SSL/TLS と全体的なセキュリティ開発におけるいくつかの重要な変更に...

C++ TpeScriptシリーズのジェネリックについて

目次1. テンプレート2. ジェネリック3. ジェネリック再帰4. デフォルトのジェネリックパラメー...

Reactのヒントはフックの依存関係の問題を解消する方法を教えます

reactプロジェクトで非常に一般的なシナリオ: const [watchValue、setWatc...

openlayers6のマップオーバーレイの詳細な説明

1. オーバーレイの概要オーバーレイとは、その名の通り、別の形で地図上に表示される、覆うことを指しま...

Vue は小数点付きの星評価を実装します

この記事では、小数点付きの星評価を実装するためのVueの具体的なコードを参考までに共有します。具体的...

史上最もシンプルな MySQL データのバックアップと復元のチュートリアル (パート 1) (パート 35)

データのバックアップと復元に関する最初の記事を皆さんに共有します。具体的な内容は次のとおりです。基本...

MYSQLでリモートアクセス権限を有効にする方法

1. MySQLデータベースにログインするmysql -u ルート -pユーザーテーブルを表示する ...

Ubuntu 18.04 Server バージョンのインストールと使用方法 (画像とテキスト)

1 システムのインストール手順OSバージョン:1804イメージのダウンロード: http://cd...

Vue シングルファイルコンポーネントの実装

最近、vue について読みました。これまで基本的に見落としていた単一ファイル コンポーネントを見つけ...

React Router 5.1.0 はページジャンプナビゲーションを実装するために useHistory を使用します

目次1. withRouterコンポーネントを使用する2. ルートタグを使用するReactRoute...

TypeScript 3.7 で注目すべき 3 つの新機能について簡単に説明します。

目次序文オプションの連鎖ヌル結合呼び出されていない関数のチェック他の序文TypeScript 3.7...

IE6 の歪み問題

質問: <form...> の下の <input type="hidde...

Windows 10 での MySQL 8.0 のダウンロードとインストール構成のグラフィック チュートリアル

この記事では、MySQL 8.0のダウンロードとインストールについてご紹介します。具体的な内容は以下...

カルーセル効果を実現するための純粋なjs

この記事では、カルーセルマップの効果を実現するためのjsの具体的なコードを参考までに共有します。具体...