[vue] 鼠标 hover（悬停）改变 background-color 移入变色

鼠标 hover（悬停）改变 background-color

<div id="demo">
   <div @mouseenter="mouseEnter" 
        @mouseleave="mouseLeave" 
        :style="active">
   			Hover over me!
   </div>
</div>

var demo = new Vue({
          
   
    el: #demo,
    data: {
          
   
        active: 
    },
    methods: {
          
   
        mouseEnter: function(){
          
   
            this.active = background-color: #cccccc;
        },
        mouseLeave: function () {
          
   
            this.active = ;
        },
    }
});

多个颜色 移入变色 变不一样的颜色

<div v-for="(item, index) in list" :key="index">
    <div
      class="dlItem"
      @mouseenter="handleMouseEnter(item)"
      @mouseleave="handleMouseLeave(item)"
      :style="{            
      backgroundColor: item.mouseFlag?hoverBgColor:dlColorList[item.name],
      }"
    >
     	{
         
  {item.name}} {
         
  {item.age}}
    </div>
</div>

data() {
          
   
    return {
          
   
	    list: [
        {
          
   
          name: "a",
          age: 14,
        },
        {
          
   
          name: "b",
          age: 12,
        },
        {
          
   
          name: "c",
          age: 15,
        },
      ],
     dlColorList: {
          
   
        a: "yellow",
        b: "pink",
        c: "red",
      },
      hoverColorList: {
          
   
        a: "gray",
        b: "aqua",
        c: "brown",
      },
      hoverBgColor: "",
    }
}

// 移入
    handleMouseEnter(item) {
          
   
      // item.mouseFlag = true;
      this.$set(item,mouseFlag,true);
      this.hoverBgColor = this.hoverColorList[item.name];
    },
    // 移出
    handleMouseLeave(item) {
          
   
      // item.mouseFlag = false;
      this.$set(item,mouseFlag,false);
      this.hoverBgColor = ;
    },