vue设置左右箭头按钮的代码

以下是一个示例代码，用于设置一个包含左右箭头按钮的 Vue 组件：

<template>
  <div>
    <button @click="prev">←</button>
    <div>{{ currentItem }}</div>
    <button @click="next">→</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['item1', 'item2', 'item3'],
      currentItemIndex: 0
    };
  },
  computed: {
    currentItem() {
      return this.items[this.currentItemIndex];
    }
  },
  methods: {
    prev() {
      if (this.currentItemIndex > 0) {
        this.currentItemIndex--;
      }
    },
    next() {
      if (this.currentItemIndex < this.items.length - 1) {
        this.currentItemIndex++;
      }
    }
  }
};
</script>

在这个示例中，items 数组包含了一些项目，currentItemIndex 表示当前项目的索引。点击左箭头按钮时，prev 方法会将 currentItemIndex 减 1，点击右箭头按钮时，next 方法会将 currentItemIndex 加 1。currentItem 是一个计算属性，根据 currentItemIndex 返回当前项目的值