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

Question

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

我能想到的唯一方法是用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>

另一种方法，如果你想改变你的数据结构，是在你的数据上有一个可以绑定的show属性。v-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>