Vue.js：一次延迟输出一个元素一个数组的内容

Question

在Vue实例的data属性中，我有一个字符串数组。

data() {
  return { myArray: [] }
}

这个数组充满了句子中的单词。 例如：

['Hi', 'my', 'name', 'is', 'foo']

我想将句子一次输出到模板中的段落标签中，每个单词一个单词，之间有1秒的延迟，类似于提词提示器的工作方式：

[0秒]-嗨

[1秒]-嗨，我的

[2秒]-你好，我叫

[3秒]-嗨，我叫

[4秒]-嗨，我叫foo

任何帮助表示赞赏。

Answer 1

您可以使用setInterval并在每次迭代中添加一个单词：

 new Vue({ el: '#app', data: { array: ['Hi', 'my', 'name', 'is', 'foo'], string: '' // here your string will be stored }, methods: { appendWords: function() { const it = this.array[Symbol.iterator](); // convenient for yeilding values const int = setInterval(() => { // time interval const next = it.next(); // next value if (!next.done) { // done = true when the end of array reached this.string += ' ' + next.value; // concatenate word to the string } else { clearInterval(int); // when done - clear interval } }, 1000) // interval duration, 1s } }, mounted() { this.appendWords(); // invoke function when ready } }); 

 <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <p>{{ string }}</p> </div> 

Answer 2

码

new Vue({
  el:"#app",
  data:{
    base: ['Hi', 'my', 'name', 'is', 'foo'],
    timed: []
  },
  mounted(){
    this.base.forEach((item, i) => {
      setTimeout(() => {
        this.timed.push(`[${i} sec] - ${this.base.slice(0, i + 1).join(" ")}`)
      }, i * 1000)
    })
  }
})

模板

<div id="app">
  <p v-for="time in timed">{{time}}</p>
</div>

例子

编辑

因此，为了娱乐，我考虑了如何使用javascript进行提词提示器仿真。 这是很幼稚的方法，但是在我投入的时间上起作用。

 new Vue({ el:"#app", data:{ lines: [ 'Hi, my name is Foo. I am a literal', 'programmer. This is a teleprompter', 'simulation. These lines should all', 'be about the same length. There are ', 'different strategies for making that', 'happen.' ], show:[] }, mounted(){ let currentIndex = 0 this.$el.addEventListener('animationend', () => { this.show.push(this.lines[++currentIndex]) }) this.show.push(this.lines[0]) } }) 

 @keyframes revealText { 0% { width:0%; } 100% { width:100%; } } #app{ width: 500px; margin: auto } h1 { white-space:nowrap; overflow: hidden; animation: revealText 5s; } 

 <script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> <div id="app"> <h1 v-for="line in show">{{line}}</h1> </div>