Question

所以我正在加载一些数据，并且我在我的模板中使用v-for循环将其呈现给DOM。现在我想让数据以一定的间隔出现。即;每秒都会显示一条新消息。

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

所以，如果你们有任何关于我应该怎么做的建议，那就太好了！

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

另一种方法是，如果要更改数据结构，则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>

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

1 个答案: