Как использовать атрибуты класса и стиля в Vue.js?

@josie 

В Vue.js атрибуты класса и стиля можно использовать через объекты data или через директивы v-bind и v-bind:class/v-bind:style.

Использование через объекты data:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<template>
  <div :class="myClass" :style="myStyle">Hello World</div>
</template>

<script>
export default {
  data() {
    return {
      myClass: 'class-1',
      myStyle: {
        backgroundColor: 'red',
        color: 'white'
      }
    }
  }
}
</script>

В данном примере атрибуты класса и стиля определяются в объекте data и передаются в шаблон через директивы v-bind:class и v-bind:style.

Использование через директивы v-bind и v-bind:class/v-bind:style:

1
2
3
4

<template>
  <div v-bind:class="{ 'class-1': true, 'class-2': false }"
       v-bind:style="{ backgroundColor: 'red', color: 'white' }">Hello World</div>
</template>

В данном примере атрибуты класса и стиля задаются непосредственно в директивах v-bind:class и v-bind:style. Булевы значения в объекте класса определяют, нужно ли задавать данный класс элементу.