Стилизация через атрибут style в Vue
CSS стили можно напрямую добавлять
через атрибут style. Для этого
в атрибут передается объект, в котором желаемые
CSS свойства должны быть ключами этого объекта,
а соответствующие значения CSS свойств -
значениями этого объекта.
Давайте для примера покрасим какой-нибудь абзац в красный цвет и добавим границу зеленого цвета:
<template>
<p :style="{color: 'red', border: '1px solid green'}">
text
</p>
</template>
Давайте теперь вместо границы установим ему
font-size в 30px. Так как в
объекте не может быть ключа с дефисом, мы
должны взять его в кавычки:
<template>
<p :style="{color: 'red', 'font-size': '30px'}">
text
</p>
</template>
Можно также вместо font-size написать
fontSize - это также будет работать:
<template>
<p :style="{color: 'red', fontSize: '30px'}">
text
</p>
</template>
Дан абзац. Покрасьте его текст в зеленый цвет, а его фон - в желтый.
Дан абзац. Сделайте его текст жирным и курсивным.