让对象保持定义的顺序来排列

v-for循环中,当遍历对象时,一般都会自己给对象排序了,比如说属性的key是数字时:

js 复制代码
const a = {
  0: 'aaa',
  2: 'ccc',
  1: 'ddd'
}

当去循环它的时候,它就会自己给我们按照012排序了,但我们又不想让它自己给我们排序。

我就想它按 aaa bbb ddd 排序。不要给我按key的值去排序。

想了这种解决方法,结果不行,好像也没按照我定义的顺序来,(因为现代js不保证对象属性的顺序)。


下面就是将对象换成数组这种强制手动维护顺序

js 复制代码
<script setup>
import { ref, computed } from 'vue'

const msg = ref('Hello World!')
const obj = ref({
  0: 'aaa',
  2: 'bbb',
  1: 'ddd'
})
const objOrder = ref([0, 2, 1])

const orderedObj = computed(() => objOrder.value.map(key => (
  {
    key,
    value: obj.value[key]
  }
)))
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
  <div v-for="([key, value], index) in Object.entries(obj)" :key="index">{{ key }} - {{ value}}</div>

{{orderedObj }}
  <div v-for="item in orderedObj">
    {{ item.key }}: {{ item.value }}
  </div>
</template>

这种写法就行:

相关推荐
Lovereo18 分钟前
我的目标检测性能优化之路:预算不够、GPU 没有、但性能我得要
前端
蒙娜丽宁23 分钟前
Rust 与 WebAssembly:构建高效前端应用的全流程复盘
前端·rust·wasm
这儿有一堆花23 分钟前
使用 Actix-web 开发高性能 Web 服务
前端·数据库
豆苗学前端25 分钟前
10分钟带你入门websocket,并实现一个在线多人聊天室
前端·javascript·后端
白水清风26 分钟前
Vue3之渲染器
前端·vue.js·面试
刘永胜是我30 分钟前
解决Volta环境下npm全局包卸载失败:一次深入排查之旅
前端·node.js
白水清风31 分钟前
Vue3之组件化
前端·vue.js·面试
边洛洛34 分钟前
解决[PM2][ERROR] Script not found: D:\projects\xxx\start
前端·javascript
农夫山泉的小黑1 小时前
【DeepSeek帮我准备前端面试100问】(十八)Reflect在vue3的使用
前端·面试
Achieve前端实验室1 小时前
【每日一面】手写防抖函数
前端·面试·node.js