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