тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Работа с 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>

Дан абзац. Дано свойство color, в которой хранится CSS цвет. Сделайте так, чтобы абзац имел цвет, хранящийся в свойстве color.

Модифицируйте предыдущую задачу. Пусть color изначальное имеет значение 'black'. Сделайте кнопку, по нажатию на которую цвет поменяется на 'red'.

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>

Практика

Дан чекбокс. Дан абзац. Сделайте следующее: если чекбокс отмечен - абзац должен быть красного цвета, а если не отмечен - то черного.