Stilning via style-attribut i Vue

CSS-stilar kan läggas till direkt via attributet style. För att göra detta skickas ett objekt in i attributet, där önskade CSS-egenskaper ska vara nycklar i detta objekt, och motsvarande värden för CSS-egenskaperna - värdena för detta objekt.

Låt oss som exempel måla något stycke i rött och lägga till en grön ram:

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

Låt oss nu istället för en ram sätta font-size till 30px. Eftersom ett objekt inte kan ha en nyckel med bindestreck måste vi sätta den inom citattecken:

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

Man kan istället för font-size skriva fontSize - det kommer också att fungera:

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