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

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

jensen

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

2 | 0

vuejs

2 ответа

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

ottilie.farrell

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

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

<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 и указываем метод который вызывать на клик.

1 | 0

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

nikko

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

@jensen

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

Использовать директиву v-bind:class:

<template>
  <div v-bind:class="{ 'class-name': isActive }"></div>
</template>

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

Использовать оператор v-bind сокращенно:

<template>
  <div :class="{ 'class-name': isActive }"></div>
</template>

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

Использовать атрибут :class в сочетании с объектом:

<template>
  <div :class="classObject"></div>
</template>

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

Использовать атрибут :class с массивом имен классов:

<template>
  <div :class="['class-name']"></div>
</template>

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

Использовать атрибут class со строкой, содержащей имена классов:

<template>
  <div class="class-name"></div>
</template>

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

1 | 0

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

2 ответа

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