前移后移效果圖.png
首先第一個(gè)不可以前移掠械，最后一個(gè)不可以后移
<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);
}
點(diǎn)擊按鈕血淌，相對(duì)應(yīng)的視圖也會(huì)改變
后續(xù)需要獲取list的值則是移動(dòng)位置后的值
知識(shí)點(diǎn)
- Vue.set()
- this.$set
當(dāng)發(fā)現(xiàn)model上的數(shù)據(jù)發(fā)生改變，而頁(yè)面上的視圖數(shù)據(jù)沒(méi)有改變時(shí)可以考慮使用Set
splice方法也可以觸發(fā)
例如：
1谓厘、給數(shù)組中的某一個(gè)值直接賦值 this.list[index] = newValue
2幌羞、修改數(shù)組的長(zhǎng)度 this.list.length = newLength
這兩種方法會(huì)改變list的值但是不會(huì)觸發(fā)視圖的更新
可以有兩種方法解決 - this.
set(this.list,index,value)
- splice
this.list.splice(index,number,value)
文檔API
官方關(guān)于set的API.png
this.$set除了可以修改數(shù)據(jù)，也可以添加數(shù)據(jù)竟稳，這個(gè)可以根據(jù)使用場(chǎng)景相對(duì)應(yīng)的實(shí)現(xiàn)
如果是添加屬性
animal:{
type: 'dog',
age: 12
}
mounted() {
this.animal.aa = 123;//這行代碼會(huì)改變animal里面的數(shù)據(jù)但是不會(huì)更改視圖
this.$set(this.animal,'ages',23)//既改變數(shù)據(jù)也會(huì)更改視圖属桦，并且在這個(gè)地方會(huì)把上方的this.animal.aa= 123也一起更新到視圖里
},
