vue中v-for循环渲染数组时，如何改变顺序

Question

比如数组为['a','b','c','d']
我用v-for时，想把'b','c'放在前面，该怎么实现？

Answer 1

可以好好看看vue列表渲染里面的关于显示过滤/排序结果的说法，可以再不修改数组或者对象的情况下，进行显示的排序修改，所以你可以不修改这个原本的数组，返回一个已经排序的数组副本，来进行展示，也就是v-for遍历的是一个计算属性或者函数，返回的结果是排序后的数组即可。这样既不会影响原数组，又可以在展示的时候经过了你想要的排序。

Answer 2

使用filter过滤来修改，并且改变保持原始数据

<template>
    <div>
        <ul>
            <li v-for="item in list|customOrder">{{item}}</li>
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return {
            list: ["a","b","c","d"]
        }
    },
    filters: {
        customOrder(list){
            let first = list.shift();
            let last = list.pop();
            list.push(first);
            list.push(last);
            return list;
        }
    }
}
</script>

Answer 3

应该对数组进行预处理排序，而不是想怎么用v-for改变渲染顺序

Answer 4

自己对数组处理一下呗~

Answer 5

对数组处理。
根据需求不同处理。
可以在获取到数据的时候改。也可以在计算属性里computed改。

Answer 6

vue 主要是对数据进行操作的，所以你可以控制数组来改变顺序