Vue.js 点击图片切换效果实现 | 使用 v-bind 和 v-on

在 Vue.js 中实现点击图片切换的效果，可以使用 v-bind 绑定图片的 src 属性，并且通过 v-on 绑定点击事件。当点击图片时，通过切换一个变量的值来改变图片的 src，从而实现图片的切换。

以下是一个简单的示例代码：

<template>
  <div>
    <img v-bind:src='imageSrc' v-on:click='toggleImage'>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'image1.jpg',
      toggle: false
    }
  },
  methods: {
    toggleImage() {
      if (this.toggle) {
        this.imageSrc = 'image1.jpg';
      } else {
        this.imageSrc = 'image2.jpg';
      }
      this.toggle = !this.toggle;
    }
  }
}
</script>

在上面的代码中，通过 data 属性定义了两个变量，imageSrc 和 toggle。imageSrc 用于绑定图片的 src 属性，toggle 用于切换图片的标识。toggleImage 方法用于切换图片的 src 属性和 toggle 的值。当点击图片时，会调用 toggleImage 方法，根据 toggle 的值来切换图片的 src 属性，并且更新 toggle 的值。

注意：上面的代码中的 image1.jpg 和 image2.jpg 是示例图片的路径，你需要根据实际情况替换为你自己的图片路径。