Vue提供了一个非常好用的指令——v-for，可以轻松地实现无限循环。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'cherry']
    }
  }
}
</script>

在这个例子中，我们使用 v-for 依次遍历 list 数组，并将数组中每一个元素绑定到 li 元素上。通过指定 item 和 index，我们可以在模板中访问每一个元素及其索引。

在组件开发中，通常会出现需要无限循环的情况，比如轮播图、滚动条等。这时候我们可以使用 v-for 配合计算属性来实现无限循环。

<template>
  <div>
    <ul :style="{ transform: 'translateX(' + translateX + 'px)' }">
      <li v-for="(item, index) in infiniteList" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'cherry'],
      current: 0
    }
  },
  computed: {
    infiniteList() {
      let arr = [...this.list, ...this.list, ...this.list];
      let start = this.current % this.list.length;
      return arr.slice(start, start + this.list.length);
    },
    translateX() {
      return -this.current * 200;
    }
  },
  mounted() {
    setInterval(() => {
      this.current++;
    }, 2000);
  }
}
</script>

在这个例子中，我们使用计算属性 infiniteList 来实现无限循环，它将原始数组复制三遍，并根据当前元素的索引值计算新的数组，从而实现无限循环的效果。同时，我们使用 setInterval 函数来定时更新 current 值，以便在模板中动态地改变展示的内容。