Vue.js 一次显示一个数组中的数据[关闭]答案

【问题标题】：Vue.js display one data at a time from an array [closed]Vue.js 一次显示一个数组中的数据[关闭]
【发布时间】：2018-09-18 10:02:22
【问题描述】：

我的要求是这样的

我有一个名称很少的数组。
我想从这个数组中获取名字并将其显示在分区。之后我想显示第二个名字，然后是第三个......
我希望这种情况以无限循环的形式发生，并且应在一分钟后更改名称。

我如何使用 Vue.js

实现这一点

<template>
  <div class="">

  </div>
</template>

<script>

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


}
</script>

【问题讨论】：

查看网络上的 vue 滑块教程，您可以使用相同的想法。而且你不应该问一个完整的解决方案。

标签： vue.js vuejs2

【解决方案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>

【讨论】：

非常感谢。有用！ =D，我也找到了解决问题的方法。再次感谢您对我的帮助。 =)

【解决方案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>

【讨论】：