<script>
Vue({
data: {
orders: []
},
created() {
$.get( {
url: 'orders',
dataType: 'json'
})
.then( data => {
this.orders = data;
});
},
methods: {
delete(index) {
// 用索引删除
this.orders.splice(index, 1);
},
deleteByID(id) {
this.orders.splice(this.orders.find( order => {
return order.id === id;
}), 1);
}
}
});
</script>
<tr v-for="(order, index) in orders">
<td>...</td>
<td>
<button type="button" @click="delete(index)">用索引删除</button>
<button type="button" @click="deleteByID(order.id)">用 ID 删除</button>
</td>
</tr>

vue中的列表项删除操作的更多相关文章

  1. 3-7 Vue中的列表渲染

     举个案例:循环data中的list的值在div中,并显示相应的index值. 关于数组的循环: //显示效果如下图: //一般的列表渲染最好带一个key值,要把key值设置为唯一值的话,可以选择in ...

  2. vue 中后台 列表的增删改查同一解决方案

    查看 & 查询 常⻅业务列表⻚都是由 搜索栏 和 数据列表 组成. 其中: 搜索栏包含 搜索条件 . 新增 . 批量xx . 导出 等对 数据列表 全局操作功能项. 数据列表包含 分⻚ 和每条 ...

  3. python3中list列表的一些操作

    最近遇到许多List的操作,感觉它是一种很重要的一种基础数据结构,本人掌握的也不是很扎实,这里找了一些列表的操作,常用函数,记录下来,希望对大家有用.如果理解有偏差,欢迎指正,感谢! (1)列表的合并 ...

  4. Python中list列表的常见操作

    Python的list是一个列表,用方括号包围,不同元素间用逗号分隔. 列表的数据项不需要具有相同的类型.(列表还可以嵌套,即列表中的列表) 每个元素都有一个索引(表示位置),从0开始:可以用索引-1 ...

  5. mySql事务_ _Java中怎样实现批量删除操作(Java对数据库进行事务处理)?

      本文是记录Java中实现批量删除操作(Java对数据库进行事务处理),在开始之前先来看下面这样的一个页面图: 上面这张图片显示的是从数据库中查询出的出租信息,信息中进行了分页处理,然后每行的前面提 ...

  6. python序列(二)列表的删除操作

    1.使用del命令删除列表中的指定位置上的元素 >>> s=[1,2,3,4] >>> del s[1] >>> s [1, 3, 4] 2.使用 ...

  7. Jquery mobile 中在列表项上使用单选按钮

      无意中发现可以在li上实现开关按钮 http://jsfiddle.net/Gajotres/pzfr2/                 触类旁通,终于实现了在li上增加单选按钮组   @mod ...

  8. ASP.NET MVC3 实例(六) 增加、修改和删除操作(二)

    http://www.jquery001.com/asp.net-mvc3-instance-add-update-delete2.html 上篇我们在 ASP.NET MVC3 中实现了添加操作,由 ...

  9. vue中给请求到的数据对象加属性问题

    今天发现了个很奇怪的问题,我在做一个:点击列表  使点中的列表项变色的功能,而且是多个大列表项,在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项. 解决思路,因为这些大列表项是请求到的数据 ...

随机推荐

  1. 12.1——类的定义与声明,隐含的this指针

    类的定义与声明: (1)将const放在成员函数的形参列表之后,可以将将成员函数声明为常量,而它的意思是函数不能改变所操作的数据成员 这里必须在声明和定义处都加上const. (2)成员函数有一个隐含 ...

  2. Borg Maze-POJ3026(bfs+最小生成树)

    http://poj.org/problem?id=3026 如果一个一个普通搜处理不好的话会超时  可以连到一块搜 我觉得这个方法特别好 #include<stdio.h> #inclu ...

  3. HDU 1244 【DP】

    题意: 中文. 思路: 先初步处理,用give-take求出每个城市剩的钱. 求解问题转化成使得和不小于0的最长连续字串. 枚举起点,然后当该起点加的和为负时开始枚举下一起点.(这个状态的转移) 2W ...

  4. why在重写equals时还必须重写hashcode方法

    首先我们先来看下String类的源码:可以发现String是重写了Object类的equals方法的,并且也重写了hashcode方法 public boolean equals(Object anO ...

  5. react 使用 eslint 的三种代码检查方案总结,多了解点--让代码更完美....

    1.介绍 ESLint 是一个可扩展,每条规则独立,被设计为完全可配置的lint工具. 可以用来检测代码,避免低级错误 可以用来规范代码的开发风格,统一代码习惯. 2.为什么使用 ESLint ? 统 ...

  6. Oracle 行转列小结

    近期在工作中.对行转列进行了应用,在此做一个简单的小结. 转换步骤例如以下:     1.创建表结构 CREATE TABLE RowToCol ( ID NUMBER(10) not null, U ...

  7. Linux中查看文件或者文件夹大小

    df -l 查看磁盘空间大小命令 df -hl  查看磁盘剩余空间 df -h  查看每个根路径的分区大小 du -sh  当前文件夹下所有文件大小(包括子文件大小 du -sm  [文件夹] 返回该 ...

  8. Markdown 语法和代码高亮

    安装 Python Markdown 安装命令 pip install markdown 视图中渲染 Markdown blog/views.py import markdown from djang ...

  9. awk基本使用方法简单介绍

    之前说过sed, 今天来说awk, 它也是一个文本处理器. 是linux下的一个命令, 比sed更强大. 搞linux开发, 尤其是后台开发, 这个命令差点儿必需要用到. awk这三个字母分别代表其三 ...

  10. soapUI系列之—-01 介绍soapUI简介,groovy 简介

    1.soapui简介 SoapUI是一个自由和开放源码的跨平台功能测试解决方案.通过一个易于使用的图形界面和企业级功能,SoapUI让您轻松,快速创建和执行自动化功能.回归.合规和负载测试.在一个测试 ...