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