排序对象
items: [
{
name: '张三', age: 20 },
{
name: '李四', age: 18 },
{
name: '王五', age: 25 },
]
根据age排序
要对对象数组按照其中某个属性进行排序，我们可以使用 JavaScript 的 sort() 方法，并传入一个自定义的比较函数。在这个比较函数中，我们可以指定按照哪个属性进行排序。
假设有一个对象数组 items，其中每个对象都包含一个 name 属性和一个 age 属性，我们可以使用以下代码将它们按照 age 属性进行排序：
<template>
<div>
<h3>排序前：</h3>
<ul>
<li v-for="(item, index) in items" :key="index">{
{ item.name }}（{
{ item.age }}岁）</li>
</ul>
<h3>按年龄排序后：</h3>
<ul>
<li v-for="(item, index) in sortedItems" :key="index">{
{ item.name }}（{
{ item.age }}岁）</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
name: '张三', age: 20 },
{
name: '李四', age: 18 },
{
name: '王五', age: 25 },
],
};
},
computed: {
sortedItems() {
return this.items.sort((a, b) => a.age - b.age);
},
},
};
</script>
在上面的代码中，我们在组件的 data 选项中定义了一个对象数组 items，它包含了每个人的姓名和年龄。在模板中，我们使用 v-for 指令循环渲染数组中的元素。在 sortedItems 计算属性中，我们调用了数组的 sort() 方法，并传入了一个比较函数，这个比较函数会根据 age 属性进行排序。
注意，这里的比较函数要返回一个数字，表示两个对象的大小关系。如果返回值为负数，则表示第一个对象应该排在第二个对象之前；如果返回值为正数，则表示第一个对象应该排在第二个对象之后；如果返回值为零，则表示两个对象相等，不需要调换顺序。
根据name排序
如果要根据 name 属性对对象数组进行排序，只需要修改比较函数即可。以下是按照 name 属性进行排序的代码示例：
<template>
<div>
<h3>排序前：</h3>
<ul>
<li v-for="(item, index) in items" :key="index">{
{ item.name }}（{
{ item.age }}岁）</li>
</ul>
<h3>按姓名排序后：</h3>
<ul>
<li v-for="(item, index) in sortedItems" :key="index">{
{ item.name }}（{
{ item.age }}岁）</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
name: '张三', age: 20 },
{
name: '李四', age: 18 },
{
name: '王五', age: 25 },
],
};
},
computed: {
sortedItems() {
return this.items.sort((a, b) => {
if (a.name < b.name) {
return -1;
} else if (a.name > b.name) {
return 1;
} else {
return 0;
}
});
},
},
};
</script>
版权声明：
原创博主：牛哄哄的柯南
博主原文链接：https://keafmd.blog.csdn.net/
个人博客链接：https://www.keafmd.top/
看完如果对你有帮助，感谢点击下面的点赞支持！
[哈哈][抱拳]
加油！
共同努力！
Keafmd
感谢支持牛哄哄的柯南，期待你的三连+关注~~
keep accumulate for my dream【共勉】
↓ ↓ ↓ ↓ ↓ ↓