Vue Project a line of JS code to click on the image to zoom in and zoom out

A line of JS code xue Project needs to click on the image to zoom out, in fact, the main use of the vue:class dynamic switch, the content is relatively simple. At first I thought of the maintenance of the needs too complicated, and test little sister chatted a bit before the reaction came.

Two months less than four items, now is the maintenance of the bug phase, has been overtime to add the feeling that the whole person is not a fairy, is the yellow face of the Mother series ~ words not many said, on the code

<! DOCTYPE html>"en">"UTF-8"><title> Picture Click to zoom in to zoom out </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 time times the original size of the picture*/Transition:all Ease0.5s; }/*time to enlarge the image*/img.active {Transform:scale (3);/*image needs to be magnified 3 times times*/Position:absolute; /*is relative to the previous container positioning, here to enlarge the picture, can not use position:relative, and float, otherwise it will cause z-index invalid */Z-index: -; } </style>class="Vuebox"> 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">ConstVM =NewVue ({el:". Vuebox", data: {ischoose:false}, methods:{imgscc:function () { This. Ischoose =! This. Ischoose}} });</script></body>
Normal size effect
After clicking, zoom in twice times the effect
When you click again, it reverts to the normal size state
Articles about Z-index that do not work are recommended:
76546367
Vue Project a line of JS code to click on the image to zoom in and zoom out