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がトランザクション分離を実装する方法の簡単な分析

推薦する

Dockerコンテナとホストマシン間の8時間の差の問題を解決する

デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...

Nginx の起動に失敗した場合のいくつかのエラー処理の詳細な説明

Nginx を Web サーバーとして使用する際に、次の問題が発生しました。 1. nginxの起動...

CSS でのフィルタープロパティの使用に関する詳細な説明

フィルター属性は要素の視覚効果を定義しますぼかし画像にガウスぼかしを適用します。 「半径」の値は、ガ...

JavaScript 正規表現の説明

目次1. 正規表現の作成2. 使用モード2.1 シンプルモードの使用2.2 特殊文字の使用3. 応用...

Linux でのマルチスレッドにおけるフォークの紹介

目次質問:ケース(1)子スレッドを作成する前にフォークするケース(2)子スレッドを作成した後にフォー...

Docker で Nginx イメージ サーバーを構築する方法

序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...

MYSQL ロック解除とロックテーブルの紹介

MySQL ロックの概要他のデータベースと比較すると、MySQL のロック メカニズムは比較的単純で...

JS変数ストレージのディープコピーとシャローコピーの詳しい説明

目次可変タイプとストレージスペーススタックメモリとヒープメモリ基本的なデータ型参照タイプグラフィック...

MySQL 8.0 の新機能: ハッシュ結合

MySQL 開発チームは、2019 年 10 月 14 日に MySQL 8.0.18 GA バージ...

Mysql の主キーと一意キーの違いのまとめ

主キーとは何ですか?主キーは、テーブル内の各タプル (行) を一意に識別するテーブル内の列です。主キ...

Linux で scp コマンドを使用してファイルをリモートでコピーする方法の詳細な説明

序文scp は secure copy の略です。scp は、Linux システムの ssh ログイ...

HTML doctype の役割の紹介

ドキュメント モードには次の 2 つの機能があります。 1. HTML文書を解析するためにどのHTM...

MySQL が innobackupex を使用して接続サーバーをバックアップできない場合の解決策

innobackupex を使用してバックアップする際に MySQL がサーバーに接続できない場合は...

MySQL の左結合操作における on 条件と where 条件の違いの紹介

優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...

MySQL での coalesce() の使用に関するヒントのまとめ

序文最近、偶然 MySQL の coalesce を発見しました。ちょうど時間があったので、MySQ...