vue中的列表项删除操作
<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中的列表项删除操作的更多相关文章
- 3-7 Vue中的列表渲染
举个案例:循环data中的list的值在div中,并显示相应的index值. 关于数组的循环: //显示效果如下图: //一般的列表渲染最好带一个key值,要把key值设置为唯一值的话,可以选择in ...
- vue 中后台 列表的增删改查同一解决方案
查看 & 查询 常⻅业务列表⻚都是由 搜索栏 和 数据列表 组成. 其中: 搜索栏包含 搜索条件 . 新增 . 批量xx . 导出 等对 数据列表 全局操作功能项. 数据列表包含 分⻚ 和每条 ...
- python3中list列表的一些操作
最近遇到许多List的操作,感觉它是一种很重要的一种基础数据结构,本人掌握的也不是很扎实,这里找了一些列表的操作,常用函数,记录下来,希望对大家有用.如果理解有偏差,欢迎指正,感谢! (1)列表的合并 ...
- Python中list列表的常见操作
Python的list是一个列表,用方括号包围,不同元素间用逗号分隔. 列表的数据项不需要具有相同的类型.(列表还可以嵌套,即列表中的列表) 每个元素都有一个索引(表示位置),从0开始:可以用索引-1 ...
- mySql事务_ _Java中怎样实现批量删除操作(Java对数据库进行事务处理)?
本文是记录Java中实现批量删除操作(Java对数据库进行事务处理),在开始之前先来看下面这样的一个页面图: 上面这张图片显示的是从数据库中查询出的出租信息,信息中进行了分页处理,然后每行的前面提 ...
- python序列(二)列表的删除操作
1.使用del命令删除列表中的指定位置上的元素 >>> s=[1,2,3,4] >>> del s[1] >>> s [1, 3, 4] 2.使用 ...
- Jquery mobile 中在列表项上使用单选按钮
无意中发现可以在li上实现开关按钮 http://jsfiddle.net/Gajotres/pzfr2/ 触类旁通,终于实现了在li上增加单选按钮组 @mod ...
- ASP.NET MVC3 实例(六) 增加、修改和删除操作(二)
http://www.jquery001.com/asp.net-mvc3-instance-add-update-delete2.html 上篇我们在 ASP.NET MVC3 中实现了添加操作,由 ...
- vue中给请求到的数据对象加属性问题
今天发现了个很奇怪的问题,我在做一个:点击列表 使点中的列表项变色的功能,而且是多个大列表项,在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项. 解决思路,因为这些大列表项是请求到的数据 ...
随机推荐
- angularjs ngRoute的使用简单例子
很丑的小例子,刚学angularjs,写下来方面以后看. 1.例子的工程目录如下: 2.index.html代码如下: <!DOCTYPE html><html><hea ...
- xhprof安装&&使用[转载]
编译安装 wget http://pecl.php.net/get/xhprof-0.9.2.tgz tar zxf xhprof-0.9.2.tgz cd xhprof-0.9.2/extensio ...
- iOS-bug·Failed to connect to github-production-release-asset-2e65be.s3.amazonaws.com port 443: Operation time out
在首次运行 react naticve 项目时, 遇到了如下的问题: Failed to connect to github-production-release-asset-2e65be.s3.am ...
- 【小记事】解除端口占用(Windows)
开发中有时会因为端口占用而导致起项目时报错(如下图),这时候只要解除端口占用即可. 解除端口占用: 1.打开cmd(win+r),查看端口占用情况 netstat -ano | findstr 端口号 ...
- Spring Boot中使用logback日志框架
说明:Spring Boot在最新的版本中默认使用了logback框架.一般来说使用时只需在classpath下创建logback.xml即可,而官方推荐使用logback-spring.xml替代, ...
- 微信小程序之 Tabbar(底部选项卡)
1.项目目录 2.在app.json里填写:tab个数范围2-5个 app.json { "pages": [ "pages/index/index", &qu ...
- Android四大组件与进程启动的关系(转)
一. 概述 Android系统将进程做得很友好的封装,对于上层app开发者来说进程几乎是透明的. 了解Android的朋友,一定知道Android四大组件,但对于进程可能会相对较陌生. 一个进程里面可 ...
- Python的字符串和列表和字典的方法/函数
字符串 S.find()#可指定范围查找字串,返回索引值,否则返回-1 S.index()#同find,只是找不到的之后返回异常 S.count()#返回找到字串的个数 S.lower()#转小写 S ...
- Web—CSS概述
一.概念: 它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言 的一个子集)等文件样式的计算机语言. 二.特点: 1.实现网页内容与样式的分离 2.降低图形文件的 ...
- hdu1133 Buy the Ticket (卡兰特数应用+java大数)
题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=1133 [题意] 电影票50块一张 有m个人手里正好有50块,n个人手里正好有100块,售票厅開始没有 ...