vue中 @点击循环显示数组内容

<template>
  <div>
    <button @click="add"> 循环</button>
    <div  >
      {{a}}
    </div>
  </div>
</template>```

<script>
export default {
  data() {
    return {
      arr:[1,2,3],
      a:null,
      i:2,
    };
  },
  mounted() {
    
  },
  methods: {
    add(){
      this.i++
      this.a = this.arr[this.i % (this.arr.length) ]
    },

  },
};
</script>