本来看着是一张照片但是鼠标点这个照片又出现另外一张照片用vsc软件写并且用vi-if指令写简单一点的代码

在Vue.js中，如果你想实现这种效果，通常会使用`v-for`循环遍历数组，并结合`v-if`条件判断来切换显示的照片。这里是一个简单的例子，假设你有一个数据列表`photoList`，每项代表一张图片：

<template>
  <div class="image-container">
    <img :src="currentPhoto.src" @click="changePhoto" v-if="showCurrentPhoto">
    <!-- 更换图片的按钮或其他交互元素 -->
    <button @click="previousPhoto">上一张</button>
    <button @click="nextPhoto">下一张</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photoList: ['photo1.jpg', 'photo2.jpg', 'photo3.jpg'], // 指定你的照片数组
      currentPhotoIndex: 0,
      showCurrentPhoto: true, // 初始状态展示第一张照片
    };
  },
  methods: {
    changePhoto() {
      this.showCurrentPhoto = !this.showCurrentPhoto; // 点击切换显示状态
    },
    previousPhoto() {
      if (this.currentPhotoIndex > 0) {
        this.currentPhotoIndex--;
        this.showCurrentPhoto = true;
      }
    },
    nextPhoto() {
      const maxIndex = this.photoList.length - 1;
      if (this.currentPhotoIndex < maxIndex) {
        this.currentPhotoIndex++;
        this.showCurrentPhoto = true;
      }
    },
  },
};
</script>

在这个例子中，我们用`currentPhotoIndex`跟踪当前显示的图片索引，当用户点击照片时，通过改变`showCurrentPhoto`的值切换显示状态；`previousPhoto`和`nextPhoto`方法则用于切换到上一张和下一张图片。