Styling via het style attribuut in Vue

CSS-stijlen kunnen direct worden toegevoegd via het style attribuut. Hiervoor wordt een object doorgegeven aan het attribuut, waarin de gewenste CSS-eigenschappen de sleutels van dit object moeten zijn, en de bijbehorende waarden van de CSS-eigenschappen - de waarden van dit object.

Laten we bijvoorbeeld een alinea rood kleuren en een rand groene kleur toevoegen:

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

Laten we nu in plaats van een rand de font-size instellen op 30px. Omdat in een object geen sleutel met een koppelteken kan staan, moeten we het tussen aanhalingstekens zetten:

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

Je kunt in plaats van font-size ook fontSize schrijven - dit zal ook werken:

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