Stilisering deur die style attribuut in Vue

CSS style kan direk bygevoeg word deur die style attribuut. Om dit te doen, word 'n voorwerp aan die attribuut oorgedra, waarin die verlangde CSS eienskappe die sleutels van hierdie voorwerp moet wees, en die ooreenstemmende waardes van die CSS eienskappe - die waardes van hierdie voorwerp.

Kom ons verf 'n paragraaf in rooi en voeg 'n groen rand by byvoorbeeld:

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

Kom ons stel nou sy font-size in na 30px in plaas van 'n rand. Aangesien 'n voorwerp nie 'n sleutel met 'n koppelteken kan hê nie, moet ons dit tussen aanhalingstekens plaas:

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

'n Mens kan ook fontSize skryf in plaas van font-size - dit sal ook werk:

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