<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如何实现对数据排序


基础教程推荐
猜你喜欢
- css滤镜基础教程 2024-01-24
- js结合json实现ajax简单实例 2023-02-01
- echarts报错:Error in mounted hook的解决方法 2022-08-30
- Vue.set、Vue.mixin 2023-10-08
- JS实现把一个页面层数据传递到另一个页面的两种方式 2024-03-09
- html5指南-7.geolocation结合google maps开发一个小的应用 2023-12-18
- CSS教程:inline-block在各浏览器的显示 2024-01-24
- 浅析JavaScript中的变量复制、参数传递和作用域链 2023-12-01
- css 之空格处理的方法 2024-03-10
- CSS3转换功能transform主要属性值分析及实现分享 2024-02-08