“ 2. Definieren Sie Datenobjekte in Daten; im CSS."/> “ 2. Definieren Sie Datenobjekte in Daten; im CSS.">
Heim > Artikel > Web-Frontend > So fügen Sie CSS dynamisch in Vue hinzu
So fügen Sie CSS dynamisch in Vue hinzu: 1. Binden Sie dynamische Stile an Elemente mit der Syntax „f7bd6308cef54b20a801ba0f636fe258"; 2. Definieren Sie Daten im Datenobjekt; 3. Schreiben Sie Stile in CSS.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, Dell G3-Computer.
Schritt eins: Dynamische Stile an Elemente binden
1. Einen einzelnen Stil hinzufügen
<div class="addInvTitle" :class="lightBlue">
2. Schritt zwei: Datenobjekte in Daten definieren
<div id="addInvite" class="addInvite" :class="[addInviteHeight1, addInviteHeight2]">
Schritt drei: Im chinesischen CSS-Schreibstil
data: { addInviteHeight1: '', // 弹框的高度 addInviteHeight2: '', // 弹框的高度 lightBlue: 'lightBlue', // lightBlue是css中定义的样式名 }
[Empfohlenes Lernen:
Javascript-Tutorial für FortgeschritteneDas obige ist der detaillierte Inhalt vonSo fügen Sie CSS dynamisch in Vue hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!