So fügen Sie Stile zu Elementen in Vue hinzu

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]".

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>

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>

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>

3. Referenzieren Sie die Stilobjekte in mehreren Daten ;

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

Codebeispiel:

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

(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!