vue|vue 上移 下移 删除 排序
【vue|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)
}
}
}
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show
- 如何在手机上查看测试vue-cli构建的项目