Styling via style-attribut i Vue

CSS-stilarter kan tilføjes direkte via style-attributten. For at gøre dette overføres et objekt til attributten, hvor de ønskede CSS-egenskaber skal være nøgler i dette objekt, og de tilsvarende værdier for CSS-egenskaber - værdier for dette objekt.

Lad os for eksempel farve et afsnit i rød og tilføje en grøn grænse:

App.vue<template>
  <p :style="{color: 'red', border: '1px solid green'}">
    text
  </p>
</template>

Lad os nu i stedet for en grænse indstille font-size til 30px. Da der i et objekt ikke kan være en nøgle med bindestreg, skal vi sætte den i anførselstegn:

App.vue<template>
  <p :style="{color: 'red', 'font-size': '30px'}">
    text
  </p>
</template>

Man kan også skrive fontSize i stedet for font-size - dette vil også virke:

App.vue<template>
  <p :style="{color: 'red', fontSize: '30px'}">
    text
  </p>
</template>