Стилизация чрез атрибут style във Vue

CSS стилове могат директно да се добавят чрез атрибута style. За това в атрибута се подава обект, в който желаните CSS свойства трябва да са ключове на този обект, а съответните стойности на CSS свойствата - стойности на този обект.

Нека за пример оцветим някакъв абзац в червен цвят и добавим граница в зелен цвят:

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

Нека сега вместо граница му установим font-size на 30px. Тъй като в обекта не може да има ключ с тире, ние трябва да го вземем в кавички:

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

Може също вместо font-size да се напише fontSize - това също ще работи:

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