Wie man dynamischen Stil in vueJs verwendet

Question

Gibt es eine Möglichkeit, Daten als Requisiten in VueJs Komponente zu erhalten und den Wert innerhalb < Stil> Abschnitt zu verwenden?

so etwas wie:

<my-component color="red" /> 

und als dynamischer Wert innerhalb < style> Abschnitt der Komponente rot zu verwenden.

Answer 1

v-bind kann Ihnen mit dynamischen Styling in vue.js wie erläutert here helfen.

Die Objektsyntax für v-bind: style ist ziemlich einfach - es sieht fast wie CSS aus, außer dass es ein JavaScript-Objekt ist. Sie können entweder Camelcase oder Kebab-Fall (Verwendung Zitate mit Kebab-Fall) für die CSS-Eigenschaft Namen verwenden:

HTML

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> 

vue Instanz

data: { 
    activeColor: 'red', 
    fontSize: 30 
} 

Jetzt activeColor ist hier reaktiv, wenn Sie activeColor ändern wird es auch im HTML/CSS ändern.