Question

我希望Vue网站上的某些小部件每n秒更改一次。存档的最佳方法是什么？通过变化，我的意思是一个像旋转木马一样替换了另一个。

Answer 1

这是一个CodeSandbox示例。

您可以通过设置时间间隔并绑定dynamic components来更改显示的窗口小部件（re：组件）。

<template>
  <component :is="active"></component>
</template>

<script>
  import ComponentA from "./components/ComponentA";
  import ComponentB from "./components/ComponentB";
  import ComponentC from "./components/ComponentC";

  export default {
    name: "App",
    components: {
      ComponentA,
      ComponentB,
      ComponentC
    },
    data () {
      return {
        rate: 5,
        active: 'component-a',
        interval: null,
        components: ['component-a', 'component-b', 'component-c']
     }
   },
   mounted () {
     this.interval = setInterval(this.rotate.bind(this), this.rate)
   },
   methods: {
     rotate () {
       const index = this.components.findIndex(component => component === this.active)

       this.active = ((index + 1) === this.components.length) ? this.components[0] : this.components[index + 1]
     }
   }
</script>

如何根据时间动态更改Vue组件？通过变化，我的意思是像旋转木马中的一个替代另一个

1 个答案: