[' 硕士',' 博士及以上','专科','本科','小学','高中','大学'] 使用vue进行学历从小到大排序
时间: 2023-08-06 14:11:57 浏览: 40
可以使用 Vue 的 computed 属性来实现学历排序,具体代码如下:
HTML 代码:
```html
<div id="app">
<ul>
<li v-for="degree in sortedDegrees">{{ degree }}</li>
</ul>
</div>
```
Vue 实例代码:
```javascript
new Vue({
el: '#app',
data: {
degrees: ['硕士', '博士及以上', '专科', '本科', '小学', '高中', '大学'],
},
computed: {
sortedDegrees: function () {
return this.degrees.sort((a, b) => {
const degreeMap = {
硕士: 0,
博士及以上: 1,
专科: 2,
本科: 3,
小学: 4,
高中: 5,
大学: 6,
};
return degreeMap[a] - degreeMap[b];
});
},
},
});
```
通过 computed 属性中的 sortedDegrees 方法,使用 sort 函数对学历进行从小到大的排序。其中,需要先定义一个 degreeMap 对象,将每个学历对应的排序值定义好,然后在 sort 函数中使用它进行排序。最终,在 HTML 中使用 v-for 循环渲染 sortedDegrees 数组即可。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![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)