vue实现文字跑马灯

在Vue.js中实现文字跑马灯效果，通常通过JavaScript结合DOM操作来完成。这里有一个简单的示例：

<template>
  <div id="marquee">
    <p v-for="(word, index) in words" :key="index" @transitionend="updatePosition(index)">
      {{ word }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      words: ['这是一个', '跑马灯', '演示...'],
      currentWordIndex: 0,
      intervalId: null,
    };
  },
  methods: {
    updatePosition(index) {
      if (index === this.words.length - 1) {
        this.currentWordIndex = 0;
      } else {
        this.currentWordIndex++;
      }

      // 更新当前显示的文字
      this.$refs.marquee.querySelector('p').innerText = this.words[this.currentWordIndex];

      // 如果还没到达最后一段，设置新的定时器
      if (this.currentWordIndex < this.words.length - 1) {
        this.intervalId = setTimeout(() => this.updatePosition(index + 1), 1000); // 每秒移动一段
      } else {
        // 清除定时器，停止滚动
        clearTimeout(this.intervalId);
      }
    },
  },
  mounted() {
    this.updatePosition(0); // 初始化时立即开始滚动
  },
};
</script>

<style scoped>
#marquee {
  display: inline-block;
  white-space: nowrap; /* 防止换行 */
}
</style>

在这个例子中，我们创建了一个动态的`<p>`元素列表，每次过渡结束时更新显示的文字，并设置定时器使其逐次向前推进。当滚动到最后一部分时，会清除定时器停止滚动。