Javascript Vue.js，更改数组项顺序，并在DOM中进行更改

在Vue实例中，我有一个名为“block”的数组，其中包含4个值。我使用v-for将此数组渲染到DOM：

<div class="block" @click="shuffleArray()">
    <div v-for="(number, index) in block">
        <span :class="[`index--${index}`]">{{ number }}</span>
    </div>
</div>

虽然值会发生变化，但它们不会在实际的DOM中移动，我如何在单击时实现这一点，跨度实际上会在DOM中发生变化？每个跨距都应用了一种样式，因此我想要一种视觉表示，使值按顺序变化：

shuffleArray: function() {
    const shifted = this.block.shift();
    this.block.push( shifted );
}

    span.index--0 {
        background-color: tomato;
    }

    span.index--1 {
        background-color: khaki;
    }

    span.index--2 {
        background-color:lavenderblush;
    }

    span.index--3 {
        background-color: lightcoral;
    }

也许有一种只使用CSS的解决方案不需要DOM操作。

我建议使用该解决方案，以实现以下目的：

Vue.config.devtools=false；
Vue.config.productionTip=false；
新Vue({
el:'列表演示'，
数据：{
项目：[1,2,3,4,5,6,7,8,9]，
下次：10
},
方法：{
随机索引：函数（）{
返回Math.floor（Math.random（）*this.items.length）
},
添加：函数（）{
this.items.splice（this.randomIndex（），0，this.nextNum++）
},
删除：函数（）{
this.items.splice（this.randomIndex（），1）
},
}
})

。列表项{
显示：内联块；
右边距：10px；
}
.列表进入活动状态，.列表保持活动状态{
过渡：所有1；
}
.list输入.list leave to/*。list leave active低于版本2.1.8*/{
不透明度：0；
变换：translateY（30px）；
}

添加
去除
{{item}}

我想这正是我想要的，谢谢。在允许的情况下接受答案。不客气，也可以查看vuejs.org/v2/guide/transitions.html#List Move transitions