<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. Codeforces Round #297 (Div. 2) D. Arthur and Walls [ 思维 + bfs ]

    传送门 D. Arthur and Walls time limit per test 2 seconds memory limit per test 512 megabytes input stan ...

  2. C. The Two Routes---cf602C(Dij)

    http://codeforces.com/problemset/problem/602/C 题目大意:  有n个城市 有m条铁路  如果两个城市没有铁路  那么一定有公路 求从1 到 n 用铁路和公 ...

  3. 寒武纪camp网络测试赛

    寒武纪camp网络测试赛 地址:oj点我进入 A(树形dp+树链剖分) 题意: 分析: 考虑树形dp,f0(x)和f1(x)分别表示以x为根的子树,不取x点或取x点的最大合法子集的元素个数 那么对于一 ...

  4. Java开发笔记(一百)线程同步synchronized

    多个线程一起办事固然能够加快处理速度,但是也带来一个问题:两个线程同时争抢某个资源时该怎么办?看来资源共享的另一面便是资源冲突,正所谓鱼与熊掌不可兼得,系统岂能让多线程这项技术专占好处?果然是有利必有 ...

  5. LinkedList总结

    1,LinkedList也是继承了List的接口 所以在LinkedList中存储的也是有序的,不唯一的数据 它采用的是链表式储存,所以比较适合用来执行插入,删除等功能 2,LinkedList特有的 ...

  6. 学习swift从青铜到王者之Swift语言函数05

    1.定义一个函数以及调用 //一,定义一个无参无返回值函数 func fun1(){ print("this is first function") } fun1() 2.定义一个 ...

  7. 【网络】TCP的拥塞控制

    一.拥塞控制的一般原理 拥塞:对网络中某一资源的需求超过了该资源所能提供的可用部分 拥塞控制是防止过多的数据注入到网络,这样可以使网络中的路由器或链路不致过载,拥塞控制是一个全局性的过程. 流量控制往 ...

  8. [TypeScript] Transform Existing Types Using Mapped Types in TypeScript

    Mapped types are a powerful and unique feature of TypeScript's type system. They allow you to create ...

  9. Spring3+ibatis (SQL Server)+pager-taglib.tld查询分页的实现

    pager-taglib分页開始~ 查了好多关于分页的技术,终于选定下面方法实现~ 1.首先下载jar包:pager-taglib.jar,pager-taglib.jar放在WEB-INF/lib文 ...

  10. PL/SQL Developer导入导出Oracle数据库方法

    前一篇博客介绍了Navicat工具备份Oracle的方法.这篇博客介绍一下使用PL/SQL Developer工具导入导出Oracle数据库的方法. PL/SQL Developer是Oracle数据 ...