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

Question

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

这是开始的样板

const header = document.querySelector('.header')
const needs = ['jacket', 'umbrella', 'sunscreen', 'sunglasses', 'air cooler']

基本上我想要实现的是每 % 秒设置一个元素的needsas 文本，完全随机。.header我希望它使用 Vue.js 而不是 vue-cli 创建它，因为 setInterval 会使页面滞后。请帮助我，因为我不知道该怎么做。如何在 Vue 中实现这样的功能：

   setInterval(()=>{
   header.innerHTML = needs[Math.floor(Math.random()*6)]
}, 5000)

标签： javascripthtmlvue.jsvue-component

Answer 1

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

<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>

这里的工作示例。请查看此处
的 Vue 文档。