Heim > Web-Frontend > Front-End-Fragen und Antworten > So fügen Sie Stile zu Elementen in Vue hinzu

So fügen Sie Stile zu Elementen in Vue hinzu

青灯夜游
Freigeben: 2023-01-12 18:10:39
Original
2563 Leute haben es durchsucht

Methode hinzufügen: 1. Verwenden Sie die Anweisung „:class="['class name']" zum Hinzufügen; 2. Verwenden Sie ":class="['class name 1','class name 2',{attribute name(class name) ):'Attribute value (true or false)}]""-Anweisung; 3. Verwenden Sie die Anweisung „:class="{Attribute name (class name):true}"; 4. Verwenden Sie „:style="{' style name' :'style value'}""-Anweisung; 5. Verwenden Sie die Anweisung ":style="style"" zum Hinzufügen; 6. Verwenden Sie die Anweisung ":style="[data]".

So fügen Sie Stile zu Elementen in Vue hinzu

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer. ??

2 , im Array Verwenden Sie ternäre Ausdrücke

<h1 :class = "[&#39;类名1&#39;,&#39;类名2&#39;]">这种方法  需要用  v-bind: => :  绑定</h1>
Nach dem Login kopieren
4. Wenden Sie Objekte direkt an Elemente Oben, durch die Form von :style

<h1 :class = "[&#39;类名1&#39;,&#39;类名2&#39;,表达式?&#39;类名3&#39;:&#39;&#39;]">这种方法  需要用  v-bind: => :  绑定</h1>
Nach dem Login kopieren

2. Definieren Sie das Stilobjekt in Daten und referenzieren Sie es auf :style
<h1 :class = "[&#39;类名1&#39;,&#39;类名2&#39;,{属性名(类名):&#39;属性值(true或false)}]">这种方法  需要用  v-bind: => :  绑定</h1>
Nach dem Login kopieren
3. Referenzieren Sie die Stilobjekte in mehreren Daten ;

<h1 :class = "{属性名(类名1):true,属性名(类名2):true}">这种方法  需要用  v-bind: => :  绑定</h1>
Nach dem Login kopieren

Codebeispiel:

<h1 :style = "{&#39;样式名&#39;:&#39;样式值&#39;}">这种方法  需要用  v-bind: => :  绑定</h1>
Nach dem Login kopieren
(Lernvideo-Sharing:

Vuejs-Einführungs-Tutorial

, Grundlegendes Programmiervideo)

Das obige ist der detaillierte Inhalt vonSo fügen Sie Stile zu Elementen in Vue hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
vue
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage