В Vue.js классами можно управлять при помощи директивы v-bind:class или просто :class. Директива умеет обрабатывать следующие варианты:

1. название класса -- этот класс будет применен к элементу;
2. объект, где ключом будет имя класса, а значением условие, при котором класс должен быть применен к элементу;
3. список с названиями классов или объектами (можно и вперемешку).

Пример:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">

<div

class="demo"

@click="attachRed = !attachRed"

:class="divClasses"></div>

<div class="demo" :class="{red: attachRed}"></div>

<div class="demo" :class="[color, {red: attachRed}]"></div>

<hr>

<input type="text" v-model="color">

</div>

new Vue({

el: '#app',

data: {

attachRed: false,

color: 'green'

},

computed: {

divClasses: function() {

return {

red: this.attachRed,

blue: !this.attachRed

};

}

}

});

Стилями в Vue.js можно управлять при помощи директивы v-bind:style или просто :style. Директива умеет обрабатывать следующие входные данные:

1. объект, где ключом будет название CSS-свойства (можно писать без кавычек, если свойство не содержит дефисов, а если содержит, то в кавычках или в camelCase, например, backgroundColor);
2. список таких объектов.

Пример:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">

<div class="demo" :style="{backgroundColor: color}"></div>

<div class="demo" :style="myStyle"></div>

<div class="demo" :style="[myStyle, {height: width + 'px'}]"></div>

<hr>

<input type="text" v-model="color">

<input type="text" v-model="width">

</div>

new Vue({

el: '#app',

data: {

color: 'gray',

width: 100

},

computed: {

myStyle: function() {

return {

backgroundColor: this.color,

width: this.width + 'px'

};

}

}

});