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

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>

这种写法就行:

相关推荐
萌萌哒草头将军2 分钟前
Prisma ORM 又双叒叕发布新版本了!🚀🚀🚀
前端·javascript·node.js
mldong30 分钟前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字33 分钟前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
程序视点1 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows
一点一木2 小时前
🚀 2025 年 07 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
脑袋大大的2 小时前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts
ayas123192 小时前
CSS学习
前端·css·学习
人生在勤,不索何获-白大侠2 小时前
day25——HTML & CSS 前端开发
前端·css·html
Running_C2 小时前
Content-Type的几种类型
前端·面试
前端Hardy2 小时前
10 分钟搞定婚礼小程序?我用 DeepSeek 把同学的作业卷成了范本!
前端·javascript·微信小程序