Javascript 如何在Vue JS中使用v-for和orderBy过滤器反转数组的顺序？

我正在使用Vue JS进行viewmodel绑定。在我的

数据

对象中，我有一个按升序（从最早到最新）排序的项目数组，出于基于代码的原因，我希望保持这种方式

var v = new Vue({
    el: '#app',
    data: {
        items: [
            {id: 51,  message: 'first'},
            {id: 265, message: 'second'},
            {id: 32,  message: 'third'}
        ],
    }
}

但是，当我在模板中显示数组时，我希望颠倒顺序，使其降序（从最新到最旧）。我尝试了以下方法：

<ol>
    <li v-for="item in items | orderBy -1" track-by="id">

这不起作用，因为

orderBy

过滤器似乎需要字段名作为其第一个参数

---

使用

orderBy

过滤器，在模板中使用

v-for

语法是否有办法实现这一点？或者我必须创建一个自定义的

反向
过滤器吗？
v-for指令不支持反向迭代，因此如果您想按最新订单订购，则需要添加另一个字段来指示添加项目的时间，或者将
id
更改为每次添加项目时递增

然后，
字段
作为指示添加订单的字段：



注意：以下内容适用于Vue 1，但在Vue 2中，过滤器已被弃用，您可以
将看到：'属性或方法“reverse”未在
实例，但在渲染过程中被引用。有关详细信息，请参阅tdom_93的答案
vue2

您可以创建自定义筛选器以按相反顺序返回项目：

Vue.filter('reverse', function(value) {
  // slice to make a copy of array, then reverse the copy
  return value.slice().reverse();
});

然后在
v-for
表达式中使用它：

<ol>
    <li v-for="item in items | reverse" track-by="id">




Vue2的更新
我想展示一些处理数据而不使用过滤器的方法，因为它们在Vue2中已被弃用

内部计算属性

使用计算属性代替过滤器，这会更好，因为您可以在组件中的任何位置使用该数据，而不仅仅是在模板中：

内置Vuex getter属性

如果您使用的是Vuex，并且您将数据存储在
store.state
对象中。对存储在状态中的数据进行某些转换的最佳方法是在
getters
对象中进行转换（例如，过滤项目列表并对其进行计数，逆序等等…）

并从组件计算属性中的getter检索状态：

computed: {
    showDialogCancelMatch() {
        return this.$store.state.reverseItems;
    }
}

简洁的解决方案：

<li v-for="item in items.slice().reverse()">
//do something with item ...
</li>


//对物品做点什么。。。

对于我的用例（无可否认，它明显不同于OP…），我希望在v-For“循环”中以相反的顺序排列数组的索引

我的解决方案是创建一个Vue应用程序方法
reverseRange（length）
，该方法返回一个长度为1到0的整数数组。然后，我在我的
v-for
指令中使用了它，每次需要它时，我都将数组元素称为
myArray[index]

这样，索引的顺序是相反的，然后我就可以使用它们访问数组的元素

我希望这有助于像我这样在需求上有细微差别的人登陆本页面。
我只更改显示顺序，而不是颠倒元素的创建顺序

<ol class="reverseorder">
    <li v-for="item in items" track-by="id">




还有我的CSS

<style>
.reverseorder {
  display: flex;
  flex-direction: column-reverse;
}
</style>


.反向顺序{
显示器：flex；
弯曲方向：柱反向；
}

无需克隆阵列并将其反转。
您可以使用：


在vue 2.0中不起作用，错误是“实例上未定义属性或方法“reverse”，但在渲染过程中引用了该属性或方法。”，第二个代码段应为：
return store.getters.reverseItems
这将创建一个计算数组，该数组可以正常工作，但当您从原始数据源中删除项时，索引键不同。有没有办法保持密钥不变，这样就不存在删除的问题？这是正确的答案。为什么人们把事情弄得这么复杂？修辞。虽然这是答案的一个解决方案，但我认为你必须从给出解决方案的开发人员的角度来看。许多经验丰富的开发人员努力将业务逻辑和显示逻辑分开。特别是那些处理过将两者融合在一起的痛苦点的人。这个解决方案有效，是的，它是一个很好的替代方案或附加解决方案。但是，它将业务逻辑和显示逻辑混合在一起，比大多数人认为的可接受得多。@ RyanWatts，这就是为什么使用<代码> SLICE（）/Cux>方法的原因。它将返回一个新的数组，因此原始的
项
数组不会受到影响。它可以工作，但会在我的控制台切片中返回一个错误。这不是一个函数。这是目前为止的理想答案。。在Javascript数组中执行反向操作是另一个processingWow！这是一个绝妙的解决方案。轻量级和非常灵活）作为旁注，这不会反转制表符索引-这意味着制表符顺序将是错误的。这对可访问性不是很好，所以如果您使用交互式元素（例如输入），请记住这一点。
<ol class="reverseorder">
    <li v-for="item in items" track-by="id">

<style>
.reverseorder {
  display: flex;
  flex-direction: column-reverse;
}
</style>

<li v-for="item in _.reverse(items)">