Vueに動的にCSSを追加する方法

vue が CSS を動的に追加する方法は次のとおりです: 1. 構文 "f7bd6308cef54b20a801ba0f636fe258"; を使用して動的スタイルを要素にバインドします 2. データ オブジェクトを定義しますデータ; 3. CSS でスタイルを記述します。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、Dell G3 コンピューター。

ステップ 1: 動的スタイルを要素にバインドする

1. 単一のスタイルを追加します

<div class="addInvTitle" :class="lightBlue">

2. 複数のスタイルを追加します

<div id="addInvite" class="addInvite" :class="[addInviteHeight1, addInviteHeight2]">

2 番目のステップ: データを定義しますデータ内のオブジェクト

data: {
    addInviteHeight1: '', // 弹框的高度
    addInviteHeight2: '', // 弹框的高度
    lightBlue: 'lightBlue',  // lightBlue是css中定义的样式名
}

ステップ 3: CSS でスタイルを記述する

.addInviteHeight1 {
height: 52.5rem;
}
.addInviteHeight1 {
height: 48rem;
}
.lightBlue {
background-color: #6e9dd3;
}

[推奨学習: JavaScript 上級チュートリアル ]

以上がVueに動的にCSSを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。