vue2.js项目中的js文件中的结构数组中包含名字,数字字符串,性别,怎么根据数字字符串从晚到早排序,可以写个demo吗
时间: 2023-06-10 16:08:42 浏览: 91
可以的,这里是一个基于 Vue2.js 的示例代码:
```
<template>
<div>
<h1>排序前</h1>
<ul>
<li v-for="(person, index) in people" :key="index">
{{ person.name }} - {{ person.age }} - {{ person.gender }}
</li>
</ul>
<h1>排序后</h1>
<ul>
<li v-for="(person, index) in sortedPeople" :key="index">
{{ person.name }} - {{ person.age }} - {{ person.gender }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
people: [
{ name: '张三', age: '19900101', gender: '男' },
{ name: '李四', age: '19951231', gender: '女' },
{ name: '王五', age: '19891212', gender: '男' }
]
};
},
computed: {
sortedPeople() {
return this.people.sort((a, b) => {
return b.age.localeCompare(a.age);
});
}
}
};
</script>
```
在这个示例代码中,我们首先定义了一个包含三个人员信息的数组 `people`,每个人员信息包含名字、出生日期和性别。然后,我们使用 `computed` 计算属性来定义一个 `sortedPeople` 数组,它将根据每个人员的出生日期(即数字字符串)从晚到早进行排序,使用 `localeCompare` 方法来比较字符串大小。最后,我们在模板中将原始数组和排序后的数组分别展示出来。
当我们在浏览器中运行这个示例代码时,就可以看到排序后的结果了。
阅读全文