Работа с CSS стилями в фреймворке Vue

Давайте теперь научимся работать напрямую с CSS стилями через атрибут style. Работа со стилями происходит следующим образом: в атрибут v-bind:style передается объект, в котором желаемые CSS свойства должны быть ключами этого объекта, а соответствующие значения CSS свойств - значениями этого объекта.

Давайте для примера покрасим какой-нибудь абзац в красный цвет и добавим границу зеленого цвета:

let app = new Vue({
el: '#app',
});
<div id="app">
<p v-bind:style="{color: 'red', border: '1px solid green'}">Абзац</p>
</div>
Давайте теперь вместо границы установим ему font-size в 30px. Так как в объекте не может быть ключа с дефисом, мы должны взять его в кавычки:

let app = new Vue({
el: '#app',
});
<div id="app">
<p v-bind:style="{color: 'red', 'font-size': '30px'}">Абзац</p>
</div>
Можно также вместо font-size написать fontSize - это также будет работать:

let app = new Vue({
el: '#app',
});
<div id="app">
<p v-bind:style="{color: 'red', fontSize: '30px'}">Абзац</p>
</div>

CSS свойства из свойств data
Значения CSS свойств могут также браться из свойств объекта data:

let app = new Vue({
el: '#app',
data: {
value1: 'red',
value2: '20px',
},
});
<div id="app">
<p v-bind:style="{color: value1, fontSize: value2}">Абзац</p>
</div>
Можно также само свойство задать без указания единиц (то есть без 'px'), а добавить эти единицы потом в самом атрибуте v-bind:style:

let app = new Vue({
el: '#app',
data: {
value1: 'red',
value2: '20', // тут напишем без 'px'
},
});
<div id="app">
<p v-bind:style="{color: value1, fontSize: value2 + 'px'}">Абзац</p>
</div>
Объект со стилями не обязательно хранить значением атрибута v-bind:style, можно вынести его в data:

let app = new Vue({
el: '#app',
data: {
styles: {
color: 'red',
fontSize: '20px',
}
},
});
<div id="app">
<p v-bind:style="styles">Абзац</p>
</div>
Можно одновременно смешивать стили из нескольких свойств. Пусть у нас есть два свойства объекта data - styles1 и styles2:

let app = new Vue({
el: '#app',
data: {
styles1: {
color: 'red',
fontSize: '13px',
},
styles2: {
border: '1px solid red',
}
},
});
Мы можем привязать к нашему абзацу одновременно стили и из styles1, и из styles2, вот так:

<div id="app">
<p v-bind:style="[styles1, styles2]">Абзац</p>
</div>
Давайте запустим:

let app = new Vue({
el: '#app',
data: {
styles1: {
color: 'red',
fontSize: '20px',
},
styles2: {
border: '1px solid red',
}
},
});
<div id="app">
<p v-bind:style="[styles1, styles2]">Абзац</p>
</div>