[60岁以上','20-25岁','45-50岁','40-45岁','20岁以下','30-35岁','25-30岁','无'] 使用vue对年龄段从小到大进行排序
时间: 2023-08-06 07:11:54 浏览: 40
可以使用Vue的computed属性和sort方法来实现对年龄段从小到大进行排序。假设数据存储在一个数组中,可以这样写:
```html
<template>
<div>
<h2>年龄段排序</h2>
<ul>
<li v-for="age in sortedAges">{{ age }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
ages: ['60岁以上', '20-25岁', '45-50岁', '40-45岁', '20岁以下', '30-35岁', '25-30岁', '无']
}
},
computed: {
sortedAges() {
return this.ages.sort((a, b) => {
if (a === '无') {
return 1
} else if (b === '无') {
return -1
} else if (a === '60岁以上') {
return 1
} else if (b === '60岁以上') {
return -1
} else {
const aMinAge = parseInt(a.split('-')[0])
const bMinAge = parseInt(b.split('-')[0])
return aMinAge - bMinAge
}
})
}
}
}
</script>
```
这里使用了一个computed属性sortedAges来返回已排序的年龄段数组。sort方法中的回调函数根据年龄段的不同进行比较和排序,其中'无'排在最后,'60岁以上'排在最前,其余的按照最小年龄进行比较排序。最后在模板中使用v-for遍历sortedAges数组,将结果渲染出来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)