Как можно работать с классами и стилями в Vue.js?

Подскажите пожалуйста, как тут(vue.js) реализуется работа с классами, стилями, как можно манипулировать их значениями, прикреплять классы, и тому подобное?

Есть большое количество дополнительных возможностей которые предоставляет директива v-bind касательно работы с атрибутами class и style.


<div id="block">


<div
class="static"
v-bind:class="{ active: is_active, error: is_error}">

<div
v-bind:class="{ active: is_active }">

В первом участке кода у нас располагается html, там мы создаем блок с id block к которому дальше привязываем объект vue, после этого внутри создаем два разных блока к которым биндим классы, после двоеточия указываем логическую переменную, в случае если значение переменной равно true, то класс отобразится.

var vm = new Vue({
el:"#block",
data:{
is_active:true,
is_error:false
}
})

Последний блок это код vue где мы создаем сам экземпляр, с свойствами. Тут можно немного поиграть для наглядности, можете попробовать в панели разработчика в консоли поменять значение свойства error:

vm.is_error=true

Как увидите, класс появится словно из ниоткуда)