Question

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

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

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

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

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

[0 sec] - 嗨

[1秒] - 你好我的

[2秒] - 你好我的名字

[3秒] - 我的名字是

[4秒] - 你好我的名字是foo

感谢任何帮助。

Answer 1

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

＆＃13;

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
  }
});

＆＃13;

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

＆＃13;

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>

Example

修改

所以，为了好玩，我想到了如何在javascript中进行提词器模拟。这很幼稚，但是我会花费很多时间。

＆＃13;
＆＃13;
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]) } })
＆＃13;
@keyframes revealText { 0% { width:0%; } 100% { width:100%; } } #app{ width: 500px; margin: auto } h1 { white-space:nowrap; overflow: hidden; animation: revealText 5s; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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

2 个答案: