<template>
<div>
<ul>
<li v-for="item in sortData" :key="item.id">{{ item.name }}: {{ item.value }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{ id: 1, name: 'A', value: 100 },
{ id: 2, name: 'B', value: 200 },
{ id: 3, name: 'C', value: 300 },
{ id: 4, name: 'D', value: 400 },
{ id: 5, name: 'E', value: 500 }
]
}
},
computed: {
sortData() {
return this.data.sort((a, b) => b.value - a.value)
}
}
}
</script>
以上是编程学习网小编为您介绍的“Vue如何实现对数据排序”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:Vue如何实现对数据排序


猜你喜欢
- vue中引用阿里字体图标的方法 2024-03-11
- JavaScript统计数组中相同的数量的方法总结 2023-08-08
- Nginx找到css但不将其加载到index.html中 2023-10-28
- 获取input标签的所有属性的方法 2023-12-26
- 客户端js判断文件类型和文件大小即限制上传大小 2024-03-11
- 浅谈Vue页面级缓存解决方案feb-alive (下) 2024-03-09
- 详解vue 单页应用(spa)前端路由实现原理 2024-02-12
- Vue-vue-router(二)嵌套路由 2023-10-08
- 详谈ajax返回数据成功 却进入error的方法 2023-02-23
- table行随鼠标移动变色示例 2024-01-02