图片放大效果

在vue项目中图片放大的效果

template代码：

<div v-for="(item,index) in posts.img" :key="index" >
    <img v-if="enlargePic==false" :src="item.image" @click="enlarge($event)">
     <img v-else  style="position:absolute;z-index:2;left:0;top:0;height: 100%" :src="smallPicUrl" @click="smallPic">
 </div>

js代码：

<script>
	export default {
    name: 'postDetails',
    data() {
      return ｛
        enlargePic:false,
        smallPicUrl:""
      }
    },
    methods: {
      enlarge(e){
        this.enlargePic == true ? this.enlargePic = false : this.enlargePic = true
        this.smallPicUrl = e.target.getAttribute("src")
      },
      smallPic(){
        this.enlargePic == false ? this.enlargePic = true : this.enlargePic = false
      }
    }
  }
</script>

我是前端小白，如有不对的地方，请指正，谢谢！