前端实现动态dom排序（使用css的属性）

flex布局的order属性可以设置DOM元素的视觉表现顺序和实际顺序不一样，从而可以实现dom的乱序排序
源代码（vue2）

<template>
  <div>
    <div style="text-align: center">
      <input v-model="sort" /> <button @click="getsort">排序</button>
    </div>
    <div class="content">
      <div
        v-for="(item, index) in 8"
        :key="index"
        :style="{ order: getorder(index) }"
      >
        第{{ index + 1 }}个div
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "test",
  data() {
    return {
      sort: "1,2,3,4,5,6,7,8",
      arr_sort: [],
    };
  },
  methods: {
    getsort() {
      this.arr_sort = this.sort.split(",");
    },
    getorder(val) {
      return this.arr_sort.findIndex((m) => Number(m) === val + 1);
    },
  },
};
</script>
<style scoped lang="less">
.content {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  align-items: center;
  div {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-block: 1px solid #dedede;
  }
}
</style>

实现效果：
输入字符串（4,5,6,1,2,3,7,8）点击排序按钮即可重新排序dom的顺序