Как задать класс по клику в vue.js?

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

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

Как задать класс по клику в vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от jerad.kuphal , 10 месяцев назад

@lori_jast 

Для задания класса по клику в Vue.js можно использовать следующий подход:

  1. В шаблоне компонента определяется элемент, на который будет навешиваться обработчик события клика:
1
2
3
4
5
6
  
    Toggle Class
    Some content
  


  1. В скрипте компонента определяется метод toggleClass, который будет переключать значение свойства isToggled, отвечающего за наличие класса на элементе:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
export default {
  data() {
    return {
      isToggled: false,
    };
  },
  methods: {
    toggleClass() {
      this.isToggled = !this.isToggled;
    },
  },
};


  1. В объекте свойств элемента, на который навешивается класс, определяется имя класса и условие его применения, зависящее от значения свойства isToggled. В данном примере класс применяется, если isToggled равен true:
1
Some content


После выполнения этих шагов при клике на кнопку будет происходить переключение значения свойства isToggled и применение или удаление класса my-class на элементе.

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

от camren , 12 дней назад

@lori_jast 

Дополнительно, для задания класса по клику с использованием директивы v-bind:class можно сделать следующим образом:

  1. В шаблоне компонента определите элемент, на который будет навешиваться обработчик события клика и применяться класс:
1
2
<button @click="toggleClass">Toggle Class</button>
<div :class="{ 'my-class': isToggled }">Some content</div>


  1. В скрипте компонента определите свойство isToggled и метод toggleClass, который будет изменять это свойство:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
export default {
  data() {
    return {
      isToggled: false,
    };
  },
  methods: {
    toggleClass() {
      this.isToggled = !this.isToggled;
    },
  },
};


В данном случае, при клике на кнопку "Toggle Class" будет вызываться метод toggleClass, который будет изменять значение свойства isToggled на противоположное. Это в свою очередь будет приводить к применению или удалению класса 'my-class' на элементе .