Vuejs применить цикл в CSS, чтобы поставить зависания

Question

В VueJS у меня есть элементы, у которых есть свойство hover в моем объекте.

Итак, я хочу добавить стиль foreach, но это невозможно.

Я хочу сделатьтакие вещи:

<style>
  @foreach (element in elements) {    
    if (element.has_backgroundhover) {
        '#'+element.id:hover {
           background : element.background_hover;
        }
    }    
 }
</style>

Обратите внимание, что у каждого элемента свой цвет фона (он хранится в его свойстве oibject)

Спасибо

Answer 1

Как то так?HTML:

    <div id="app">
      <div 
        v-for="element of elements"
        @mouseenter="element.hover=true"
        @mouseleave="element.hover=false"
        :style="{
          background: element.hover? element.background_hover : element.background
        }"
      >{{element.name}}</div>
    </div>

И JS:

    new Vue({
      el: "#app",
      data: {
        elements:[
          {
            name:"element1", 
            background:"#f8f", 
            background_hover:"#a4a",
            hover:false
          },
          {
            name:"element2", 
            background:"#ff8", 
            background_hover:"#aa4",
            hover:false
          },
        ]
      },
    })

Это не использование CSS, а использование событий, как предложено @DigitalDrifter.Я думаю, что дело в том, что реактивный CSS не является хорошей идеей и не поддерживается в VUE.Вместо этого вам нужно, чтобы свойства элемента HTML зависели от вашего объекта данных vue.Скрипка для этого: https://jsfiddle.net/edzaokum/

Answer 2

Слушатели событий @mouseenter и @mouseleave позволяют применять классы css к каждому элементу.

Например, переключить класс .hovered, для которого определен цвет фона.