vue鼠标hover(悬停)改变background-color移入变色问题_vue.js_

    
                Hover over me!    

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

 {{item.name}} {{item.age}} 

 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 = ''; }, 

 //分别为鼠标悬停时和离开时绑定方法changeImageSrc，并传递参数              //为img绑定地址 circle，在data中声明           金融多头借贷反欺诈           
        
  
 {{text}} 
. //为div绑定文字内容，在data中声明

data() {     return {      circle: require("@/assets/poc/circle.png"),      text:'我是第一块..'     };   },

 changeImageSrc (key, way) {       let tempStr = way === 'hover' ? '-click' : ''  //若悬停，将“-click”后缀拼接到图片的名称里，即新图片的名称，鼠标离开则还加载旧图片       let color = way === 'hover' ? '#8CF8FF' : '#FFFFFF'        let opacity = way === 'hover' ? '100%' : '0'           //通过传递的参数判断是否悬停，根据需求分别定义不同值的变量              switch (key) {         case 1:           this.circle = require(`@/assets/poc/circle${tempStr}.png`)  //换图片 （新图片的名称就是拼接后的名称）           this.$refs.span1.style.color = color  //为ref绑定的文字 更改颜色           this.$refs.shape1.style.opacity = opacity //为ref绑定的内容 设置透明度（设置展示与否）           this.text = '我是第一块' //悬停时更改文字           break       }       //通过传递的参数  分别让不同的部件执行不同的内容 },