前移后移效果图.png

首先第一个不可以前移，最后一个不可以后移

  <button size="small" @click="moveUp(index)" :disabled="index==0">前</button>
  <button size="small" @click="moveDown(index)" :disabled="index==list.length-1" >后</button>

           list: [{
                    id: 1,
                    data: 111
                },{
                    id: 2,
                    data: 222
                },{
                    id: 3,
                    data: 333
                },{
                    id: 4,
                    data: 444
                },{
                    id: 5,
                    data: 555
                }]

• 方法一

moveUp(index){
   if(index > 0){
      let temp = this.list[index-1];
      this.list.splice(index-1,1);
      this.list.splice(index,0,temp);
   }
},
moveDown(index){
  if(index != this.list.length-1){
      let temp = this.list[index+1];
      this.list.splice(index+1,1);
      this.list.splice(index,0,temp);
  }
}

• 方法二

moveUp(index){ 
  var tempOption = this.list[index - 1];
  this.$set(this.list, index - 1, this.list[index]);
  this.$set(this.list, index, tempOption)
},
moveDown(index){
  var tempOption = this.list[index+1];
  this.$set(this.list, index + 1, this.list[index]);
  this.$set(this.list, index, tempOption);  
}

点击按钮，相对应的视图也会改变
后续需要获取list的值则是移动位置后的值

知识点

• Vue.set()
• this.$set
  当发现model上的数据发生改变，而页面上的视图数据没有改变时可以考虑使用Set
  splice方法也可以触发
  例如：
  1、给数组中的某一个值直接赋值 this.list[index] = newValue
  2、修改数组的长度 this.list.length = newLength
  这两种方法会改变list的值但是不会触发视图的更新
  可以有两种方法解决
• this.set(this.list,index,value)
• splice
  this.list.splice(index,number,value)

文档API

官方关于set的API.png

this.$set除了可以修改数据，也可以添加数据，这个可以根据使用场景相对应的实现

如果是添加属性

                animal:{
                    type: 'dog',
                    age: 12
                }

  mounted() {
            this.animal.aa = 123;//这行代码会改变animal里面的数据但是不会更改视图
            this.$set(this.animal,'ages',23)//既改变数据也会更改视图，并且在这个地方会把上方的this.animal.aa= 123也一起更新到视图里
   },