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

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

от jensen , в категории: JavaScript , 3 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от ottilie.farrell , 3 года назад

@jensen Как вариант Вы можете создать элемент HTML(span например) и создать переменную className и добавить метод на click добавлять класс. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div>
    <span :class="className" @click="addClass"
      >Кликни чтобы добавить класс Active</span
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      className: "",
    };
  },
  methods: {
    addClass() {
      this.className = "active";
    },
  },
};
</script>


В этом примере у нас элемент span у которого изначально класса нет(пусто) и при клике будет добавлен класс "active" и для этого используем событие @click и указываем метод который вызывать на клик.

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

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

@jensen 

В Vue.js есть несколько способов добавления класса к элементу:

  1. Использовать директиву v-bind:class:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<template>
  <div v-bind:class="{ 'class-name': isActive }"></div>
</template>

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


  1. Использовать оператор v-bind сокращенно:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<template>
  <div :class="{ 'class-name': isActive }"></div>
</template>

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


  1. Использовать атрибут :class в сочетании с объектом:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<template>
  <div :class="classObject"></div>
</template>

<script>
export default {
  data() {
    return {
      classObject: {
        'class-name': true
      }
    }
  }
}
</script>


  1. Использовать атрибут :class с массивом имен классов:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<template>
  <div :class="['class-name']"></div>
</template>

<script>
export default {
  data() {
    return { }
  }
}
</script>


  1. Использовать атрибут class со строкой, содержащей имена классов:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<template>
  <div class="class-name"></div>
</template>

<script>
export default {
  data() {
    return { }
  }
}
</script>