0

我只是通过vue 转换工作，我遇到了一件我不明白的事情。

我想显示一个不断洗牌的列表。为此，我编写了函数 shuffle()，它每 2000 毫秒调用一次。在函数结束时，我将打乱后的新数组分配给变量this.items。但是，DOM 中的列表并没有被打乱！如果我this.items事先将其重新初始化为空数组，则列表将被打乱！

您可以在下面显示的 shuffle() 函数中看到这一点。如果我删除带有 的行this.items = []，则随机播放不起作用。

如果有人可以向我解释这一点，我会很高兴。

那是代码的html部分：

<transition-group name="flip-list" tag="ul">
          <li v-for="item in items" :key="item">
                    {{ item }}
          </li>
</transition-group>

这就是js部分：

<script>
export default {
  data () {
    return { items: [1, 2, 3, 4, 5, 6, 7, 8, 9] }
  },
  created () {
    setInterval(() => {
      this.shuffle()
    }, 2000)
  },
  methods: {
    shuffle () {
      const result = this.items
      let currentIndex = result.length
      let randomIndex

      // While there remain elements to shuffle...
      while (currentIndex !== 0) {
        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex)
        currentIndex--

        // And swap it with the current element.
        [result[currentIndex], result[randomIndex]] = [
          result[randomIndex], result[currentIndex]]
      }
      this.items = []
      this.items = result
    }
  }
}

</script>
4

0 回答 0