vue2.js项目中的js文件中的结构数组中包含名字,字符串形式的数字,性别,怎么根据字符串形式的数字从大到小排序,可以写个demo吗
时间: 2023-06-10 10:08:25 浏览: 159
当字符串形式的数字为整数时,可以使用 `sort()` 方法进行从大到小排序。当字符串形式的数字为小数时,需要先将字符串形式的数字转换为数值再进行排序。
以下是一个简单的示例代码,可以根据你的具体需求进行修改:
```html
<!-- index.html -->
<div id="app">
<ul>
<li v-for="person in sortedPersons">{{ person.name }} - {{ person.age }} - {{ person.gender }}</li>
</ul>
</div>
```
```javascript
// main.js
new Vue({
el: "#app",
data: {
persons: [
{ name: "张三", age: "20", gender: "男" },
{ name: "李四", age: "22", gender: "女" },
{ name: "王五", age: "18", gender: "男" },
{ name: "赵六", age: "25", gender: "女" },
{ name: "田七", age: "19", gender: "男" },
{ name: "刘八", age: "23", gender: "女" },
{ name: "陈九", age: "21", gender: "男" },
{ name: "周十", age: "24.5", gender: "女" },
],
},
computed: {
sortedPersons() {
return this.persons.sort((a, b) => {
// 将字符串形式的数字转换为数值再进行比较
const numA = parseFloat(a.age);
const numB = parseFloat(b.age);
return numB - numA;
});
},
},
});
```
在该示例中,我们使用了 `computed` 计算属性,通过 `sort()` 方法将 `persons` 数组按照年龄从大到小排序,并在模板中使用 `v-for` 指令渲染排序后的结果。
如果你想按照其他属性进行排序,可以在 `sort()` 方法中修改排序规则。
阅读全文