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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</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@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			color: 'red',
			width: 75,
			height: 75
		}
    });
</script>
</body>
</html>

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

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

Привязка стилей во Vue.js

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</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@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			color: 'red',
			width: 75,
			height: 75
		},
		computed:{
			styleObj: function(){
				return {
					'background-color': this.color, 
					height: this.height + 'px', 
					width: this.width+'px'
				}
			}
		}
    });
</script>
</body>
</html>

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

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

<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@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			color: 'red',
			width: 75,
			height: 75
		},
		computed:{
			colorStyle: function(){
				return {
					'background-color': this.color
				}
			},
			sizeStyle: function(){
				return {
					height: this.height + 'px', 
					width: this.width+'px'
				}
			}
		}
    });
</script>

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

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