Vue3 : liaison de style

Vue.js class

class et style sont des attributs des éléments HTML, utilisés pour définir les styles des éléments. Nous pouvons utiliser v-bind pour définir les attributs de style.

Lorsque v-bind gère class et style, en plus des chaînes de caractères, l'expression peut également être un objet ou un tableau.

v-bind:classPeut être abrégé en:class。

---

Liaison d'attribut class

Nous pouvons, pourv-bind:classdéfinir un objet pour basculer dynamiquementclass:

Le résultat de rendu de la classe div de l'exemple ci-dessus est :

<div class="active"></div>

Nous pouvons également passer plus de propriétés dans l'objet pour basculer dynamiquement plusieurs classes.

De plus,:classla directive peut également coexister avec des attributs class ordinaires.

Le résultat de rendu de la classe div de l'exemple ci-dessus est :

<div class="static text-danger"></div>

Lorsque isActive ou hasError change, la valeur de l'attribut class sera également mise à jour en conséquence. Par exemple, si la valeur de active est true, la liste de classes deviendra "static active text-danger".

Nous pouvons également nous lier directement à un objet dans les données :

Les résultats de rendu de l'exemple 3 et de l'exemple 2 sont les mêmes.

De plus, nous pouvons également lier ici une propriété calculée qui renvoie un objet. C'est un modèle courant et puissant :

Syntaxe de tableau

Nous pouvons passer un tableau àv-bind:class, comme indiqué dans l'exemple ci-dessous :

Le résultat de rendu de la classe div de l'exemple ci-dessus est :

<div class="static active text-danger"></div>

Nous pouvons également utiliser une expression ternaire pour basculer les classes dans la liste :

Le résultat de rendu de la classe div de l'exemple ci-dessus est :

<div class="static text-danger"></div>

---

Style Vue.js (styles en ligne)

Nous pouvons, dansv-bind:styledéfinir directement des styles, ce qui peut être abrégé en:style：

Le résultat de rendu du style div de l'exemple ci-dessus est :

<div style="color: red; font-size: 30px;">Example</div>

Vous pouvez également lier directement à unobjetde style, pour rendre le template plus clair :

v-bind:styleVous pouvez utiliser un tableau pour appliquer plusieurs objets de style à un élément :

Remarque : lorsque vous utilisezv-bind:styleavec des propriétés CSS qui nécessitent des préfixes spécifiques, tels que transform, Vue.js détectera et ajoutera automatiquement le préfixe correspondant.

Valeurs multiples

Vous pouvez fournir un tableau contenant plusieurs valeurs pour la propriété dans la liaison de style, souvent utilisé pour fournir plusieurs valeurs préfixées, par exemple :

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

Cela n'affichera que la dernière valeur du tableau prise en charge par le navigateur. Dans cet exemple, si le navigateur prend en charge flexbox sans préfixe de navigateur, alors seul display: flex sera rendu.

---

Utilisation de l'attribut class sur les composants

Lorsque vous utilisez l'attribut class sur un composant personnalisé avec un seul élément racine, ces classes seront ajoutées à cet élément. Les classes existantes sur cet élément ne seront pas écrasées.

Le résultat de rendu de la classe div de l'exemple ci-dessus est :

<h1 class="classA classB classC classD">I like example!</h1>

Cela s'applique également aux classes avec liaison de données :

<my-component :class="{ active: isActive }"></my-component>

Lorsque isActive est vrai, le HTML sera rendu comme suit :

<p class="active">Hi</p>

Si votre composant a plusieurs éléments racines, vous devez définir quelles parties recevront cette classe. Vous pouvez utiliser$attrsl'attribut de composant pour ce faire :

Remarque: Dans le template,`est un accent grave (backtick), pas une apostrophe.'。

Le résultat de rendu de la classe div de l'exemple ci-dessus est :

<div id="app" data-v-app=""><p class="classA">I like example!</p><span>这是一个子组件</span></div>

Autres extensions