javascript - 如何在 Vue(Nuxt js)中以 5 秒的间隔更改随机文本

Question

我是 Vue 的初学者，我在加载页面时以 5 秒的间隔更改随机文本时遇到了一些问题。

<template>
  <section class="container">
      <h1 class="title">
        Welcome {{ whois }}
      </h1>
	</section>
<template>

<script>
export default {
  data() {
    return {
      whois: ['Student', 'Developer', 'Programmer']
    }
  },
  // methods: {
  //   randomWhois(){
      
  //   }
  // },
  // beforeMount() {
  //   this.randomWhois();
  // }
}
</script>

我希望当间隔 5 秒时，我的文本总是被改变。

示例:(总是在 5 秒内改变)

---

欢迎学生

欢迎开发者

欢迎程序员

---

非常感谢!

Answer 1

在 mounted 中，设置一个间隔，每 5 秒触发您的方法。此方法只会将您的 whois 数组向左移动。然后在您的模板中，更改 Welcome 以显示数组 {{ whois[0] }} 中的第一个元素。

<template>
  <section class="container">
      <h1 class="title">
        Welcome {{ whois[0] }}
      </h1>
    </section>
<template>

<script>
export default {
  data() {
    return {
      whois: ['Student', 'Developer', 'Programmer']
    }
  },
  mounted(){
    window.setInterval(()=>{
      this.pollPerson();
    }, 5000);

  },
  methods: {
    pollPerson(){
      const first = this.whois.shift();
      this.whois = this.whois.concat(first);
    }
  }
}
</script>