Eine kurze Einführung in verschiedene in Vue verwendete Stile (mit Code)

Dieser Artikel bietet Ihnen eine kurze Einführung in verschiedene in Vue verwendete Stile (mit Code). Freunde in Not können darauf verweisen.

Verwenden Sie den Klassenstil

1. Verwenden Sie einen ternären Ausdruck im Array

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

3. Verschachtelte Objekte im Array

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

4. Verwenden Sie das Objekt direkt

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

Verwenden Sie den Inline-Stil

1. Schreiben Sie das Stilobjekt direkt auf das Element in der Form :style

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

Definieren das Stilobjekt in Daten und referenzieren Sie es direkt in :style

Definieren Sie den Stil für Daten:

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

In Wenden Sie im Element das Stilobjekt in Form einer Attributbindung auf das Element an:

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

3. Verweisen Sie in :style auf mehrere Daten über ein Array. Das Stilobjekt

definiert den Stil für Daten:

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

im Element, in Form einer Attributbindung, wenden Sie das Stilobjekt auf das Element an :

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

Verwandte Empfehlungen:

Beispiel einer VUE-Komponente: Wie implementiert die VUE-Komponente den Countdown?

Detaillierte Analyse von Threads und Prozessen in Node.js

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in verschiedene in Vue verwendete Stile (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!