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

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>

这种写法就行:

相关推荐
鱼樱前端29 分钟前
uni-app快速入门章法(二)
前端·uni-app
silent_missile43 分钟前
vue3父组件和子组件之间传递数据
前端·javascript·vue.js
IT_陈寒2 小时前
Vue 3.4 实战:这7个Composition API技巧让我的开发效率飙升50%
前端·人工智能·后端
少年阿闯~~3 小时前
HTML——1px问题
前端·html
Mike_jia3 小时前
SafeLine:自托管WAF颠覆者!一键部署守护Web安全的雷池防线
前端
brzhang3 小时前
把网页的“好句子”都装进侧边栏:我做了个叫 Markbox 的收藏器,开源!
前端·后端·架构
VincentFHR5 小时前
Canvas 高性能K线图,支持无限左右滑动
前端·数据可视化·canvas
sophie旭5 小时前
一道面试题,开始性能优化之旅(3)-- DNS查询+TCP(二)
前端·面试·性能优化
面向星辰5 小时前
css选择器(继承补充)
前端·css
koooo~5 小时前
Vue3中的依赖注入
前端·javascript·vue.js