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

vue が CSS を動的に追加する方法は次のとおりです: 1. 構文 "

"; を使用して動的スタイルを要素にバインドします 2. データ オブジェクトを定義しますデータ; 3. CSS でスタイルを記述します。

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

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

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

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

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 サイトの他の関連記事を参照してください。