数组上移下移 更改其值

 <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,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,downObj);//下一个节点移动到当前节点
						this.menuData.splice(this.coverNum+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>

相关文章

kindeditor4.x代码高亮功能默认使用的是prettify插件,prett...
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小