Vue.js实现点击左右按钮图片切换

要使用Vue.js实现点击左右按钮图片切换，需要遵循以下步骤：

步骤一：创建Vue实例并定义data对象

首先需要创建一个Vue实例，并且在data对象里定义需要用到的变量。例如，定义一个变量images来存放图片，定义变量currentIndex来表示当前显示的图片的下标：

<template>
  <div>
    <img :src="images[currentIndex]">
    <button @click="previous">Previous</button>
    <button @click="next">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        "url-of-image-1",
        "url-of-image-2",
        "url-of-image-3"
      ],
      currentIndex: 0
    };
  },
  methods: {
    previous() {
      this.currentIndex =
        (this.currentIndex - 1 + this.images.length) % this.images.length;
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    }
  }
};
</script>

步骤二：使用v-bind绑定图片URL

在模板中，使用<img>标签显示图片，并且使用v-bind指令绑定图片URL，将当前currentIndex对应的图片URL显示出来。

<img :src="images[currentIndex]">

步骤三：在按钮上监听click事件并调用方法

给左右切换按钮添加click事件监听器，并且在方法里面修改currentIndex的值，完成切换图片的功能。

<button @click="previous">Previous</button>
<button @click="next">Next</button>

methods: {
  previous() {
    this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
  },
  next() {
    this.currentIndex = (this.currentIndex + 1) % this.images.length;
  }
}

示例一：使用vuex管理状态

在大型应用中，可能需要使用vuex管理状态，使用vuex可以更容易地管理应用程序的状态和数据。

<template>
  <div>
    <img :src="image">
    <button @click="$store.commit('decrement')">Previous</button>
    <button @click="$store.commit('increment')">Next</button>
  </div>
</template>

<script>
export default {
  computed: {
    image() {
      return this.$store.state.images[this.$store.state.currentIndex];
    }
  }
};
</script>

示例二：使用Vue的过渡效果

Vue提供了一个transition组件，它可以添加过渡效果，可以使页面更加美观。

<template>
  <div>
    <transition name="fade">
      <img :src="image" key="image">
    </transition>
    <button @click="previous">Previous</button>
    <button @click="next">Next</button>
  </div>
</template>

<script>
export default {
  computed: {
    image() {
      return this.$store.state.images[this.$store.state.currentIndex];
    }
  },
  methods: {
    previous() {
      this.$store.commit("decrement");
    },
    next() {
      this.$store.commit("increment");
    }
  }
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease-in-out;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

在这里，使用了transition组件，并且添加了CSS样式来给图片添加淡入淡出的效果。

这就是Vue.js实现点击左右按钮图片切换的完整攻略，简单易懂！