javascript - 动态更改 Vue 中 block 级元素顺序的最佳方法？

Question

假设我有三个 div - A、B 和 c - 我想在用户单击“重新排序”时更改它们的顺序。例如，将 B 放在第一位，将 C 放在第二位，将 A 放在第三位。在 Vue 中执行此操作的最简洁方法是什么？

编辑:实际上，div 中有很多内容，因此执行类似 { divs: ['A', 'B', 'C'] } 的操作v-for 会变得太乱。

let app = new Vue({
  el: '#app',
  methods: {
    reorder: function () {
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>A</div>
  <div>B</div>
  <div>c</div>
  <button v-on:click="reorder()">Reorder</button>
</div>

Answer 1

这是我想出的:

1. 将 flexbox 用于具有 flex-direction: column 的容器
2. 具有设置顺序的 CSS 类，例如。 .one { order: 1 }
3. 根据您希望的排序方式将 CSS 类动态分配给元素。

let app = new Vue({
  el: '#app',
  data: {
    order: {
      a: 'one',
      b: 'two',
      c: 'three',
    },
  },
  methods: {
    reorder: function () {
      this.order.a = 'three';
      this.order.b = 'one';
      this.order.c = 'two';
    },
  },
});

#app {
  display: flex;
  flex-direction: column;
}

.one { order: 1; }
.two { order: 2; }
.three { order: 3; }
button { order: 4; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-bind:class="order.a">A</div>
  <div v-bind:class="order.b">B</div>
  <div v-bind:class="order.c">C</div>
  <button v-on:click="reorder()">Reorder</button>
</div>