SOURCE

new Vue({
  el: '#app',
  data: {
    items: [{
      id: 1,
      value: 'text1'
    }, {
      id: 2,
      value: 'text2'
    }, {
      id: 3,
      value: 'text3'
    }, {
      id: 4,
      value: 'text4'
    }]
  },
  methods: {
    topItem: function(index) {
      [this.items[index], this.items[index - 1]] = [this.items[index - 1], this.items[index]]
      this.items.sort()
    },
    bottomItem: function(index) {
      [this.items[index], this.items[index + 1]] = [this.items[index + 1], this.items[index]]
      this.items.sort()
    },
  }
})

<div id="app" class="demo">
  <table class="table table-striped">
    <thead>
      <th>id</th>
      <th>value</th>
      <th>向上</th>
      <th>向下</th>
    </thead>
    <tbody is="transition-group" name="flip-list">
      <tr v-for="(item,index) in items" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.value}}</td>
        <td><button :disabled="index==0" @click="topItem(index)">向上</button></td>
        <td><button :disabled="index==items.length-1" @click="bottomItem(index)">向下</button></td>
      </tr>
    </tbody>
  </table>
</div>

.flip-list-move {
  transition: transform 1s;
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}