一行js代码搞定xue项目需要点击图片放大缩小，其实主要用的是用到了vue:class的动态切换，内容比较简单。一开始我把维护的需求想得太复杂了，和测试小姐姐聊了一下才反应过来。
两个月不到跟了四个项目，现在是维护改bug阶段，一直加班加的感觉整个人已经不是小仙女了，是黄脸婆系列~话不多说，上代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>图片点击放大缩小</title><style>div, ul, li, span, img { ???margin: 0; ???padding: 0; ???display: flex; ???box-sizing: border-box;}.vueBox{ ???text-align: center; ???margin-left: 300px; ???position: relative; }img { ????transform: scale(1); ?????????/*图片原始大小1倍*/ transition: all ease 0.5s; } ?/*图片放大所用时间*/ img.active { ?????transform: scale(3); ?????????/*图片需要放大3倍*/ position: absolute; ??????????/*是相对于前面的容器定位的，此处要放大的图片，不能使用position：relative；以及float，否则会导致z-index无效*/ z-index: 100; } ??</style></head><body><div class="vueBox"> ???<img :class="{‘active‘:isChoose}" ?src="http://www.baidu.com/img/bd_logo.png" style="width: 150px" @click="imgScc"></div><script type="text/javascript" src="js/vue.min.js"></script><script type="text/javascript"> ???const vm = new Vue({ ???????el: ".vueBox", ???????data: { ???????????isChoose:false ???????}, ???????methods:{ ???????????imgScc:function () { ????????????????????????????????????this.isChoose = !this.isChoose ?????????????????????????????} ???????} ???});</script></body></html>正常大小效果
点击后，放大2倍效果
当再次点击时，会恢复到正常大小状态
关于z-index不起作用的文章推荐：
https://blog.csdn.net/apple_01150525/article/details/76546367
vue项目 一行js代码搞定点击图片放大缩小
原文地址：https://www.cnblogs.com/web1/p/8989967.html