vue实现点击箭头上下移动

html代码：

<div id="app">

    <ul>

      <li v-for="(item,i) in list">{{item.name}}

          <button v-show="i < list.length-1" @click="down(i)">↓</button>

          <button v-show="i > 0" @click="up(i)">↑</button>

      </li>

    </ul>

  </div>

script代码：
    $set（检测数组的变动）

<script>

    new Vue({

      el:'#app',

      data(){

        return{

          list:[

            {id:1,name:'张山'},

            {id:2,name:'王霞'},

            {id:3,name:'王嘉'},

            {id:4,name:'李铭'}

          ]

        }

      },

      methods:{

        down(i){

          let temp = this.list[i];

          this.$set(this.list, i, this.list[i+1])

          this.$set(this.list, i+1, temp)

        },

        up(i){

          let temp = this.list[i];

          this.$set(this.list, i, this.list[i-1]),

          this.$set(this.list, i-1, temp)

        }

      }

    })

  </script>