Comment ajouter dynamiquement du CSS dans vue

Comment ajouter dynamiquement du CSS dans vue est : 1. Liez les styles dynamiques aux éléments avec la syntaxe "

" ; 2. Définissez les données dans l'objet de données ; 3. Écrivez les styles en CSS.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur Dell G3.

Première étape : lier des styles dynamiques aux éléments

1. Ajouter un seul style

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

2 Ajouter plusieurs styles

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

Étape deux : Définir des objets de données dans data

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

Troisième étape : Dans le style d'écriture chinois CSS

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

.

[Apprentissage recommandé : Tutoriel avancé javascript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!