Привязка к стилям

Последнее обновление: 01.11.2020

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <div class="region" v-bind:style="{'background-color': color, height: height + 'px', width: width+'px'}"></div>
    <br><br>
    <input type="text" v-model="color" />
    <br><br>
    <input type="number" v-model="width" />
    <br><br>
    <input type="number" v-model="height" />
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return {
            color: 'red',
            width: 75,
            height: 75
     }
  }
}).mount('#app');
</script>
</body>
</html>

Для установки стилей атрибуту style предаются названия свойств css и их значения. При этом в качестве значения могут выступать как обычные значения стилевых свойств, так и свойства из объекта Vue, через которые мы можем манипулировать стилями.

Стоит учитывать, что если свойство css в своем названии имеет дефисы, то название свойства заключается в кавычки, как в случае со свойством background-color.

Привязка стилей и атрибут v-bind:style во Vue 3

Если необходимо установливать много различных стилевых свойств, то их можно вынести в отдельное вычисляемое свойство:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <div class="region" v-bind:style="styleObj"></div>
    <br><br>
    <input type="text" v-model="color" />
    <br><br>
    <input type="number" v-model="width" />
    <br><br>
    <input type="number" v-model="height" />
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return {
            color: 'red',
            width: 75,
            height: 75
     }
  },
	computed:{
		styleObj(){
			return {
				'background-color': this.color, 
				height: this.height + 'px', 
				width: this.width+'px'
			}
		}
	}
}).mount('#app');
</script>
</body>
</html>

Фактически каждый такой объект представляет отдельный стиль.

Если нужно задать для элемента сразу несколько подобных стилей, то они передаются в квадратных скобках:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <div class="region" v-bind:style="[colorStyle, sizeStyle]"></div>
    <br><br>
    <input type="text" v-model="color" />
    <br><br>
    <input type="number" v-model="width" />
    <br><br>
    <input type="number" v-model="height" />
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return {
            color: 'red',
            width: 75,
            height: 75
     }
  },
	computed:{
		colorStyle(){
			return { 'background-color': this.color }
		},
		sizeStyle(){
			return {
				height: this.height + 'px', 
				width: this.width + 'px'
			}
		}
	}
}).mount('#app');
</script>
</body>
</html>

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850