数组上移下移 更改其值

 <div id="app">
     <el-row>
       <el-button type="info" @click="getInfoUP">向上</el-button>
       <el-button type="warning" @click="getDown">向下</el-button> 
     </el-row>
     <div>
     	<div @click="coverHandler(index, item)" class="div-demo" :class="{active:cur==index}" v-for="(item,index) in menuData" :key="index">{{ item.con }}</div>
     </div>
     
   </div>

  <script>
    new Vue({
      el: '#app',
        data() {
          return {
			coverNum:0,
			cur:0,
            menuData:[
			  {id:"1", con:"1111",sortNum:1},
			  {id:"2", con:"2222",sortNum:2},
			  {id:"3", con:"333",sortNum:3},
			  {id:"4", con:"444",sortNum:4},
			  {id:"5", con:"5555",sortNum:5}
            ],
			contmenutemporarymess:{},	
         };
        },
		
		
		methods:{
			// 向上
			getInfoUP(){
			    console.log("数据",this.coverNum);
                if(this.coverNum == 0){//第一个节点不移动
			     	alert("第一个节点不能移动")
				    return;
                }else{
                	let curObj = this.menuData[this.coverNum];//当前位置对象
                	let preObj = this.menuData[this.coverNum-1];//上一个位置对象
					
					// 更改sortNum值
					let newpreObj=preObj;
					preObj.sortNum=curObj.sortNum;
					curObj.sortNum=newpreObj.sortNum-1;  //之所以要减1,是因为它始终输出的是一个固定的值
				   
					//替换内容
                	this.menuData.splice(this.coverNum,1,preObj);//上一个节点移动到当前节点
                	this.menuData.splice(this.coverNum-1,1,curObj);//当前节点往上移动
				
					this.coverNum=this.coverNum-1	

                }	 
			},
			
			getDown(){
				console.log("数据",this.coverNum);
				if(	this.coverNum == this.menuData.length-1){//最后节点不移动
					}else{
						let curObj = this.menuData[this.coverNum];//当前位置对象
						let downObj = this.menuData[this.coverNum+1];//下一个位置对象
						
						// 更改sortNum值
						let  newdown=downObj;
						downObj.sortNum=curObj.sortNum;
						curObj.sortNum=newdown.sortNum+1;
                        
						//替换内容  
						console.log("当前",curObj ,"下一个", downObj)
						this.menuData.splice(this.coverNum,1,downObj);//下一个节点移动到当前节点
						this.menuData.splice(this.coverNum+1,1,curObj);//当前节点往下移动
					 	this.coverNum=this.coverNum+1
				}

			},
			
			coverHandler(mess,con){
				this.cur=mess;
				this.coverNum=mess;
				this.contmenutemporarymess=con;
				console.log("注册 ",this.coverNum,"类容",con)
			}
		}
    })
  </script>

posted @ 2020-01-05 22:42  南风晚来晚相识  阅读(275)  评论(0编辑  收藏  举报