Vue.js：一度に1要素ずつ配列の内容を出力します。

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> 

Example。

編集

ので、楽しみのために、私はあなたが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>