vue上下无限循环一段文字

可以使用Vue的计算属性和定时器实现上下无限循环一段文字。具体实现思路如下：

1. 在data中定义一个数组，存储需要循环的文字内容。

2. 在计算属性中定义一个变量，用于保存当前显示的文字内容。

3. 使用定时器，定时更改当前显示的文字内容。

4. 当文字内容到达数组的末尾后，重新从数组的开头开始循环。

下面是一个简单的示例代码：

<template>
  <div>{{ text }}</div>
</template>

<script>
export default {
  data() {
    return {
      textList: [
        '春眠不觉晓，处处闻啼鸟。',
        '夜来风雨声，花落知多少。',
        '小荷才露尖尖角，早有蜻蜓立上头。',
        '天街小雨润如酥，草色遥看近却无。',
        '人生若只如初见，何事秋风悲画扇。',
      ],
      index: 0,
      duration: 2000, // 每隔2秒切换一次文字
    };
  },
  computed: {
    text() {
      return this.textList[this.index];
    },
  },
  mounted() {
    setInterval(() => {
      this.index = (this.index + 1) % this.textList.length;
    }, this.duration);
  },
};
</script>

在上面的代码中，我们定义了一个数组`textList`，存储需要循环的文字内容。然后定义了一个计算属性`text`，用于保存当前显示的文字内容。在`mounted`钩子函数中使用`setInterval`定时器，每隔`duration`毫秒更新一次`index`，从而切换当前显示的文字内容。当`index`到达数组的末尾时，使用取模运算重新从数组的开头开始循环。最终，在模板中使用`{{ text }}`绑定显示的文字内容即可。