Vue.js，v-for 上的间隔计时器

Question

所以我正在加载一些数据，并在我的模板中使用 v-for 循环将其渲染到 DOM。 现在我想让数据每隔一段时间出现一次。 即； 每秒都会出现一条新消息。

我能想到的唯一方法是用 css 隐藏所有消息，并通过一次取消隐藏它们使它们（重新）出现。 但是，我认为这不是解决此问题的正确方法。

因此，如果你们中的任何人对我应该如何处理这件事有建议，那就太好了！

Answer 1

有多种方法可以处理这个问题。 您可以使用两个数组。 一个用于保存您要显示的数据，另一个用于显示它。 然后在created函数中放置一个区间函数，该函数会将项目从保持数组传输到显示数组。 像这样：

 new Vue({ el: "#app", data: { todos: [ ], soonTodo: [ { text: "Learn JavaScript", done: false }, { text: "Learn Vue", done: false }, { text: "Play around in JSFiddle", done: true }, { text: "Build something awesome", done: true } ], interval: null, }, methods: { toggle: function(todo){ todo.done = !todo.done } }, created() { this.interval = setInterval(() => { if (this.soonTodo.length) { this.todos.push(this.soonTodo.shift()); } else { clearInterval(this.interval); } }, 1000) } })

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; } li { margin: 8px 0; } h2 { font-weight: bold; margin-bottom: 15px; } del { color: rgba(0, 0, 0, 0.3); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script> <div id="app"> <h2>Todos:</h2> <ol> <li v-for="todo in todos"> <label> <input type="checkbox" v-on:change="toggle(todo)" v-bind:checked="todo.done"> <del v-if="todo.done"> {{ todo.text }} </del> <span v-else> {{ todo.text }} </span> </label> </li> </ol> </div>

另一种方法，如果你想改变你的数据结构，是在你的数据上有一个v-show可以绑定的show属性。 然后，您的间隔函数将在每次将该属性设置为true时运行整个数组，直到显示每个项目。

// JS 
{ text: "Learn JavaScript", done: false, show: false }

// HTML
<li v-for="todo in todos" v-show="todo.show">
  <label>
    <input type="checkbox"
      v-on:change="toggle(todo)"
      v-bind:checked="todo.done">

    <del v-if="todo.done">
      {{ todo.text }}
    </del>
    <span v-else>
      {{ todo.text }}
    </span>
  </label>
</li>