Привязка классов

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

С помощью привязки атрибута class во Vue.js можно динамически управлять классами элементов. Для условной привязки классов определим следующую страницу:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
<style>
.region{
	background-color: #999;
	width: 100px;
	height: 100px;
	display: inline-block;
	margin: 10px;
}
.active{
	background-color:red;
}
</style>
</head>
<body>
<div id="app">
    <div class="region" v-bind:class="{active: isActive}" v-on:click="isActive=!isActive"></div>
    <div class="region"></div>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {isActive : false}
    });
</script>
</body>
</html>

Здесь определены два блока с классом region. Кроме того, у первого блока применяется условная привязка классов. Она имеет форму: {класс_1: true|false, класс_2: true|false, класс_N: true|false}

Если для класса определено значение true, то класс применяется. В данном случае применение класса зависит от свойства isActive, которое определено в объекте Vue. А с помощью события click у первого блока мы можем переключить значение свойства isActive, и, следовательно, включить или отключить класс active.

При этом не столь важно, определены у элемента какие-либо еще классы, все они вместе будут применяться к элементу.

Условное применение классов в Vue.js

Подобным образом можно привязать несколько классов:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
<style>
.region{
	background-color: #999;
	width: 100px;
	height: 100px;
	display: inline-block;
	margin: 10px;
}
.active{
	background-color:red;
}
.bounded{
	border: 2px solid green;
}
</style>
</head>
<body>
<div id="app">
    <div class="region" v-bind:class="{active: isActive, bounded: isBounded}"></div>
    <div class="region"></div>
	<button v-on:click="isActive=!isActive">Toggle color</button>
	<button v-on:click="isBounded=!isBounded">Toggle border</button>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {isActive : false, isBounded: false}
    });
</script>
</body>
</html>

Если название класса имеет какие-либо неалфавитно-цифровые символы, то оно помещается в кавычки:

v-bind:class="{'active-color': isActive, bounded: isBounded}"

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
<style>
.region{
	background-color: #999;
	width: 100px;
	height: 100px;
	display: inline-block;
	margin: 10px;
}
.active{
	background-color:red;
}
.bounded{
	border: 2px solid green;
}
</style>
</head>
<body>
<div id="app">
    <div class="region" v-bind:class="classObj"></div>
    <div class="region"></div>
	<button v-on:click="isActive=!isActive">Toggle color</button>
	<button v-on:click="isBounded=!isBounded">Toggle border</button>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
			isActive : false, 
			isBounded: false
		},
		computed: {
			classObj: function () {
				return {
					active: this.isActive, bounded: this.isBounded
				}
			}
		}
    });
</script>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
<style>
.region{
	background-color: #999;
	width: 100px;
	height: 100px;
	display: inline-block;
	margin: 10px;
}
.yellow{ 
	background-color: yellow; 
}
.red{ 
	background-color: red; 
}
.blue{ 
	background-color: blue; 
}
.green{ 
	background-color: green; 
}
</style>
</head>
<body>
<div id="app">
    <div class="region" v-bind:class="color"></div>
	<input type="text" v-model="color" />
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
			color: ""
		}
    });
</script>
</body>
</html>

В данном случае привязка атрибута class будет идти к свойству color. С помощью ввода в текстовое поле мы можем изменить через двусторонюю привязку значение этого свойства и соответственно поменять класс:

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

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

<style>
.region{
	background-color: #999;
	margin: 10px;
	width: 75px;
	height: 75px;
}
.bounded{
	border: 2px solid black;
}
.yellow{ 
	background-color: yellow; 
}
.red{ 
	background-color: red; 
}
.blue{ 
	background-color: blue; 
}
.green{ 
	background-color: green; 
}
.big{
	width: 100px;
	height: 100px;
}
.small{
	width: 50px;
	height: 50px;
}
</style>
<div id="app">
    <div class="region" v-bind:class="[color, {bounded: isBounded}, size]" v-on:click="isBounded=!isBounded"></div>
	<br>
	<input type="text" v-model="color" />
	<br>
	<input type="text" v-model="size" />
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
			color: "red",
			size: "small",
			isBounded: false
		}
    });
</script>
Классы во Vue.js

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

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