在 Vue 中动态更改块级元素顺序的最佳方法？

Question

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

编辑：实际上，div 中有很多内容，因此使用{ divs: ['A', 'B', 'C'] }a之类的操作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>