Une brève introduction à plusieurs styles utilisés dans Vue (avec code)

Cet article vous apporte une brève introduction à plusieurs styles utilisés dans Vue (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Utiliser le style de classe

1. Tableau

  <h1 :class="[&#39;red&#39;, &#39;thin&#39;]">这是一个邪恶的H1</h1>

2. Utiliser l'expression ternaire dans le tableau

  <h1 :class="[&#39;red&#39;, &#39;thin&#39;, isactive?&#39;active&#39;:&#39;&#39;]">这是一个邪恶的H1</h1>

3.

  <h1 :class="[&#39;red&#39;, &#39;thin&#39;, {&#39;active&#39;: isactive}]">这是一个邪恶的H1</h1>

4. Utilisez des objets directement

  <h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>

Utilisez des styles en ligne

1. Écrivez des objets de style directement sur les éléments sous la forme de :style

<.>

  <h1 :style="{color: &#39;red&#39;, &#39;font-size&#39;: &#39;40px&#39;}">这是一个善良的H1</h1>

2. Définir l'objet de style dans les données et le référencer directement à : style

• Définir le style sur les données :

 data: {
      h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
 }

• Dans l'élément, appliquez l'objet style à l'élément sous forme de liaison d'attribut :

 <h1 :style="h1StyleObj">这是一个善良的H1</h1>

3. Utilisez des tableaux dans :style pour objets de style de référence sur plusieurs données

• Définir des styles sur les données :

  data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
  }

• Dans l'élément, appliquer le styler l'objet à l'élément via la liaison d'attribut :

 <h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>

Recommandations associées :

Exemple de composant VUE : Comment le composant VUE implémente-t-il le compte à rebours ?

Analyse détaillée des threads et des processus dans Node.js

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!