vue放大缩小div_Vue.js+14行代码----实现图片的放大缩小

前言

最近有个需求，说系统上图片太小啦，有些图片看不清，so马上来做。

实现效果

CSS

img {

transform: scale(1); /*图片原始大小1倍*/

transition: all ease 0.5s; } /*图片放大所用时间*/

img.scale {

transform: scale(2); /*图片需要放大2倍*/

position: relative; /*相对定位，是相对于前面的容器定位的*/

z-index: 100; } /*属性设置元素的堆叠顺序,保证图片放大后处于最上层*/

JS

var app=new Vue({

data: {

imgIstrue:[] /*定义数组*/

},

methods: {

getData: function(){ /*这个方法是我自己定义的，作用：为了拿到后台数据*/

var row = 10; /*这个是后台拿到的数据条数，可以根据length获取*/

for(var i =0;i

app.imgIstrue[i] = false; /*初始化为false*/

}

},

imgScale:function (index) { /*这个方法是为了标识改变被点击图片的状态*/

var isTrue = app.imgIstrue[index]; /*获取被点击元素当前的值 false或true*/

app.imgIstrue.forEach(function (val,row) {

app.imgIstrue.splice(row,1,false) /*刷新数组，将数组所有值设置为false，即图片原始状态*/

})

app.imgIstrue.splice(index,1,!isTrue) /*将被点击数组元素的值反转 用于记录状态的改变*/

}

}

});

html

具体项目可见---->点我