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>
这种写法就行: