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

您可以使用第二个数组 "stock" 您的反向数据并使用 unshift（而不是 push）将每个新元素放在 [=24= 的开头]数组：

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>

Answer 2

一个简单的解决方案是使用 items 的 computed property 来反转数组（如果它被用作 prop，则不改变它的位置，或者在为了保持其最初声明的顺序）：reversedItems() { return this.items.slice().reverse(); }

代码示例：

new Vue({
  el: "#app",
  data() {
    return {
      items: ["item 1", "item 2", "item 3"],
    }
  },
  computed: {
    reversedItems() {
      // Reverse a COPY of the array to avoid messing with its initial order.
      return this.items.slice().reverse();
    },
  },
  methods: {
    loadItem() {
      const i = this.items.length;
      // Append to the end of the array in a simple approach,
      // and let the computed property re-order the array.
      this.items.push("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>

请注意，Vue 补丁 array methods (like reverse) 应用于响应式数据（例如您在 data 中声明的变量），因此结果也是响应式的。这就是为什么@sovalina 的答案中的 reversedItems 数据对 items 修改有反应，而它仅在安装组件时分配一次。

使用 v-for 时的顺序

Order when using v-for

javascript

vue.js

v-for