Как добавить класс элементу на vue.js

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

от hoyt.jerde , в категории: JavaScript , год назад

Как добавить класс элементу на vue.js

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

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

@hoyt.jerde 

Вы можете добавить класс элементу в Vue.js используя директиву v-bind или короткую запись :. Ниже пример добавления класса к элементу <div> с помощью директивы v-bind:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<template>
  <div v-bind:class="{ active: isActive }"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  }
};
</script>


В данном примере класс active будет добавлен к элементу <div> только в том случае, если значение isActive является true.


Короткая запись : выглядит следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<template>
  <div :class="{ active: isActive }"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  }
};
</script>


Вы также можете передать массив классов в качестве значения для директивы v-bind или ::

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<template>
  <div :class="[{ active: isActive }, classA, classB]"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      classA: 'class-a',
      classB: 'class-b'
    };
  }
};
</script>


В этом примере, классы class-a и class-b будут добавлены к элементу <div> в любом случае, а класс active буде

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

от sylvester , 2 месяца назад

@hoyt.jerde 

т добавлен только если значение isActive равно true.