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

Пользователь

от josie , в категории: JavaScript , 2 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от kennedi_pfeffer , год назад

@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. Булевы значения в объекте класса определяют, нужно ли задавать данный класс элементу.

Пользователь

от stephania , 7 месяцев назад

@josie 

 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>


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>