Как с помощью vue js навешать разные классы по событию mouseover на разные элементы?

Question

[nastya_zholudeva]

пробую сделать тут. Нужно чтобы при наведении на green, Hover over color! становился зеленым, на красный - красным. Если никуда не наводят, то черным

Answer 1

[0xD34F]

Так как одновременно может быть активным только один класс - вместо нескольких булевых свойств сделать одно, которое будет хранить имя активного класса:

data: () => ({
  activeClass: '',
  ...
}),

<p :class="activeClass"></p>

Возможные имена классов сложить в массив, создавать элементы с помощью v-for, перебирая этот массив; по событиям mouseover/mouseout переключать значение активного класса:

data: () => ({
  classes: [ 'какой-то класс', 'ещё класс', ... ],
  ...
}),

<p
  v-for="n in classes"
  @mouseover="activeClass = n"
  @mouseout="activeClass = ''"
>

Похоже на то, что вам нужно?

Comments

[nastya_zholudeva]

0xD34F, да) Спасибо:)