Стилизация через атрибут 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>