Javascript 使用Vue.js每5秒更改一次innerHTML

我正在创建一个简单的网站，我想改变标题的空白填充随机字每5秒

这是开始的样板

const header=document.querySelector（“.header”）
const needs=[“夹克”、“雨伞”、“防晒霜”、“太阳镜”、“空气冷却器”]

基本上，我想要实现的是每%秒将

需求

中的一个单词设置为

标题

元素的文本，完全随机。我希望它使用Vue.js而不是Vue cli创建它，因为setInterval会让页面像地狱一样滞后。 请帮帮我，因为我不知道怎么做。 如何在Vue中实现类似的功能：

setInterval（（）=>{
header.innerHTML=需要[Math.floor（Math.random（）*6）]
}, 5000)

满足您需求的简单组件如下所示：

<template>
  <div class="header">{{ word }}</div>
</template>

<script>
const words = ["jacket", "umbrella", "sunscreen", "sunglasses", "air cooler"];

export default {
  name: "HelloWorld",

  data: function() {
    return {
      word: ""
    };
  },

  methods: {
    updateWord: function() {
      this.word = words[Math.floor(Math.random() * words.length)];
    }
  },

  mounted: function() {
    this.updateWord();
    setInterval(this.updateWord, 5000);
  }
};
</script>

{{word}}
const words=[“夹克”、“雨伞”、“防晒霜”、“太阳镜”、“空气冷却器”]；
导出默认值{
名称：“HelloWorld”，
数据：函数（）{
返回{
字：“
};
},
方法：{
updateWord:function（）{
this.word=words[Math.floor（Math.random（）*words.length）]；
}
},
挂载：函数（）{
this.updateWord（）；
setInterval（this.updateWord，5000）；
}
};

工作示例。

---

请查看位于的Vue文档。

对于那些只想循环使用单词的人

<div>{{words[i}}</div>

 data() {
    return {
      words: ["jacket", "umbrella", "sunscreen", "sunglasses", "air cooler"],
      i: 0
    }
  },
  mounted() {
    setInterval(() => {
      if (this.i < this.words.length-1) this.i++
      else this.i = 0
    },5000)
  }

{{words[i}}
数据（）{
返回{
文字：[“夹克”、“雨伞”、“防晒霜”、“太阳镜”、“空气冷却器”]，
i:0
}
},
安装的（）{
设置间隔（（）=>{
如果（this.i

好的，那么你想让stack overflow用户为你制作一个vue组件吗？你尝试了什么？请检查并帮助我，因为我是vue新手，这并不意味着粗鲁，但这绝对不是vue的工作方式。请看一看（5到10分钟）在优秀的vue文档中，您可以在介绍页面中找到该问题的答案。因此，setInterval可以工作，但需要修改实例中的变量