利用flex order交换html元素顺序

css比起使用js操作dom显示隐藏，性能更好，也无需更多逻辑代码

 

<template>
  <div class="wrapper">
    <div>
      <h2>{{ type === 1 ? '交换顺序' : '原顺序' }}</h2>
      <div :class="['box', { reverse: type === 1 }]">
        <span>1</span>
        <span>2</span>
      </div>
      <button @click="type = type === 1 ? 0 : 1">切换顺序</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 0
    }
  }
}
</script>

<style scoped lang="scss">
@mixin flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  @include flex_center();

  span {
    display: inline-block;
    width: 40px;
    height: 40px;
    @include flex_center();
    border: 1px solid red;
  }

  span:nth-child(1) {
    order: 1;
  }
  span:nth-child(2) {
    order: 2;
  }

  &.reverse {
    span:nth-child(1) {
      order: 2;
    }
    span:nth-child(2) {
      order: 1;
    }
  }
}
</style>