Vue.js一次从数组显示一个数据

Question

我的要求是这样的

1. 我有一个名字很少的数组。
2. 我想从这个数组中获取名字并在其中显示 DIV。之后我想显示第二个名字，然后是第三个......
3. 我希望这是一个无限循环，名字应该在一分钟之后改变。

如何使用Vue.js

实现

<template>
  <div class="">

  </div>
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      names:["Jona","Jane","Kalana"]
    }
  }


}
</script>

Answer 1

您可以使用setInterval以固定间隔更改数组的索引。

const app = new Vue({
  el: '#app',
  data: {
    name: "",
    names:["Jona","Jane","Kalana"]
  },
  computed: {
    namesLength: function() {
      return this.names.length;
    }
  },
  mounted: function() {
    let i = 0;
    setInterval(()=>{
      const index = i++%this.namesLength;
      this.name = this.names[index];
    }, 3000); // Specify interval
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  {{name}}
</div>

Answer 2

<template>
  <div class="">

{{toDisplay}}
  </div>
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      names:["Jona","Jane","Kalana"],
      count:0,
      toDisplay:''
    }
  },
  methods:{
    
    onDisplay(){
      console.log("in")
      var self = this;
      setTimeout(function(){ 
        self.toDisplay = self.names[self.count];
        self.count = ++self.count;
        self.onDisplay();
        }, 3000);
        console.log("count",self.count)
        if(self.count >= this.names.length){
          self.count = 0;
        }
        
        
    }

  },
  created(){
    console.log("On created");
    this.onDisplay();
  }
  

}
</script>

<style>

</style>