Stilsetting via style-attributtet i Vue

CSS-stiler kan legges til direkte via style-attributtet. For å gjøre dette overføres et objekt til attributtet, der de ønskede CSS-egenskapene skal være nøklene til dette objektet, og de tilsvarende verdiene for CSS-egenskapene - verdiene til dette objektet.

La oss for eksempel fargelegge en avsnitt i rødt og legge til en grense i grønn farge:

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

La oss nå i stedet for en grense sette font-size til 30px. Siden i et objekt kan det ikke være en nøkkel med bindestrek, må vi sette den i anførselstegn:

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

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

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