vue里动态修改伪元素样式

背景描述

最近写前端页面,要求是实现鼠标放在图片上,变为另一个图片。对于前端大佬可能很容易实现,我属于菜鸟级别,写的不好大佬们勿喷。

直接上代码

方法一

**这里图片接连是网图,自己提替换**
data() {
    return {
      imageList: [
                     {
                        enterpriseGreyImg:'https://xxx.xxxx.png',
                        enterpriseColorImg:'https://xxx.xxxx.png'
                      }
                  ],
    };
  },
//样式

方法二

**这里图片接连是网图,自己提替换**
data() {
    return {
      imageList: [
                     {
                        iconname:'https://xxx.xxxx.png',
                        imagename:'https://xxx.xxxx.png'
                      }
                  ],
    };
  },
  methods: {
    moveClick(item, index) {
      // item.imagename = item.iconname;
      console.log("---1--", index);
      item.isLeave = true;
    },
    moveOtherClick(item, index) {
      // item.imagename = item.iconname;
      console.log("--2---", index);
      item.isLeave = false;
    },

    dealImag(item, index) {
      if (item.isLeave == true) {
        return item.iconname;
      } else {
        return item.imagename;
      }
    },
  },
//样式

效果可以直接复制代码后运行查看,

你可能感兴趣的:(vue里动态修改伪元素样式)