vue.js 2.0 排序

在Vue.js 2.0中，排序通常是通过计算属性（computed properties）来实现的，因为计算属性可以根据依赖的数据动态计算并返回排序后的数组。以下是一个简单的例子，展示了如何在Vue.js 2.0中对数组进行排序：

<template>
<div id="app">
<ul>
<li v-for="item in sortedList" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
list: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
]
};
},
computed: {
sortedList() {
// 使用slice()方法创建原数组的副本，以避免直接修改原数组
return this.list.slice().sort((a, b) => {
// 根据name属性进行排序
return a.name.localeCompare(b.name);
});
}
}
};
</script>

在这个例子中，我们有一个名为list的数据属性，它是一个包含对象的数组。每个对象都有一个id和一个name属性。我们想要根据name属性对这个数组进行排序。

我们创建了一个名为sortedList的计算属性，它返回一个排序后的数组。在计算属性中，我们首先使用slice()方法创建了原数组的一个副本，这样做是为了避免直接修改原始数据，这是Vue.js中的一个最佳实践。然后我们使用JavaScript的sort()方法对副本进行排序。

sort()方法接受一个比较函数作为参数，这个函数定义了排序的规则。在这个例子中，我们使用localeCompare方法来比较字符串，这样可以正确地处理不同语言环境下的字符排序。

计算属性是响应式的，这意味着每当依赖的数据发生变化时，计算属性会自动重新计算。因此，如果你在某个时刻更新了list数组，sortedList计算属性会自动反映这些变化。

这种方法的优点是简单、清晰，并且遵循Vue.js的响应式原则。它适用于任何需要对数组进行排序的场景，无论是前端展示还是作为其他计算的输入。