Vue2更新

我想展示一些可以处理数据而不使用过滤器的方法，因为Vue2 中不推荐使用过滤器：

内部计算属性

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

computed: {
    reverseItems() {
        return this.items.slice().reverse();
  }     
}

在Vuex getter属性内

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

getters: {
    reverseItems: state => {
        return state.items.slice().reverse();
    }
}

并从组件计算属性的getter获取状态：

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

简单明了的解决方案：

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

我只改变显示的顺序，而不是颠倒要创建的元素的顺序。

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

还有我的CSS

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

无需克隆阵列并将其反转。

对于我的用例（显然，它与OP不同），我想在v-for“循环”中以相反的顺序排列数组的索引。

我的解决方案是创建一个Vue应用程序方法reverseRange(length)，该方法返回一个从长度1到0的整数数组。然后，我在v-for指令中使用了它，并在myArray[index]每次需要时简单地引用Array元素。

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

希望对像我这样对自己的要求有细微差别的人有所帮助。