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

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

josie

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

15 | 0

2 ответа

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

kennedi_pfeffer

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

@josie

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

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

<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:

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

1 | 0

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

stephania

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

@josie

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

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

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

0 | 0

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

2 ответа

Похожие обсуждения: