javascript - 使用 v-for 时的顺序

Question

当使用 v-for 迭代数组时，如下所示:

<ul id="example-1">
  <li v-for="item in items">
     {{ item.message }}
  </li>
</ul>

元素按顺序排列在彼此下方:

• 列出索引为 1 的项目
• 列出索引为 2 的项目
• 列出带有索引的项目...
• 列出索引为 n 的项目

有没有办法将当前迭代中的项目添加到最后一个项目之上？

• 列出索引为 n 的项目
• 列出带有索引的项目...
• 列出索引为 2 的项目
• 列出索引为 1 的项目

非常感谢!

Answer 1

您可以使用第二个数组来“存储”反转数据并使用 unshift (而不是 push)将每个新元素放在“反转”数组的开头:

new Vue({
  el: "#app",
  data() {
    return {
      items: ["item 1", "item 2", "item 3"],
      reversedItems: []
    } 
  },
  mounted() {
    this.reversedItems = this.items.reverse()
  },
  methods: {
    loadItem(){
      let i = this.items.length
      this.items.unshift("item " + (i + 1))
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="item in reversedItems">{{ item }}</li>
  </ul>
  <button @click="loadItem">Load item</button>
</div>