vue 上移 下移 删除 排序

图文排序要用到上移下移和删除
搞个值排序呗

1.png

废话不多说上代码

模板

  ......
  
 
 
  ......

js部分

 {
     data:{
         items: [
         {
             "title": "1标题",
             "img": "图片地址",
             "seq": 1
         },
         {
             "title": "2标题",
             "img": "图片地址",
             "seq": 5
         },
         {
             "title": "3标题",
             "img": "图片地址",
             "seq": 9
         }, ],
     },
     methods:{
         sort(prop)
         {
             return function(obj1, obj2)
             {
                 var val1 = obj1[prop]
                 var val2 = obj2[prop]
                 if (!isNaN(Number(val1)) && !isNaN(Number(val2)))
                 {
                     val1 = Number(val1)
                     val2 = Number(val2)
                 }
                 if (val1 < val2)
                 {
                     return -1
                 }
                 else if (val1 > val2)
                 {
                     return 1
                 }
                 else
                 {
                     return 0
                 }
             }
         },
         up(item)
         {
             var cObj = this.items[this.items.indexOf(item)]
             var cSeq = cObj.seq
             var cgObj = this.items[this.items.indexOf(item) - 1]
             var cgSeq = cgObj.seq
             cObj.seq = cgSeq
             cgObj.seq = cSeq
             this.items.sort(this.sort('seq'))
         },
         dw(item)
         {
             var cObj = this.items[this.items.indexOf(item)]
             var cSeq = cObj.seq
             var cgObj = this.items[this.items.indexOf(item) + 1]
             var cgSeq = cgObj.seq
             cObj.seq = cgSeq
             cgObj.seq = cSeq
             this.items.sort(this.sort('seq'))
         },
         dl(item)
         {
             this.items.splice(this.items.indexOf(item), 1)
         }
     }
 }