vue.js删除列表中的一行


Posted in Javascript onJune 30, 2018

splice(index,num,item1,item2,...,itemX) 方法向/从数组中添加/删除项目,然后返回被删除的项目。

注:index--规定添加/删除项目的位置

num--要删除的项目数量

item--向数组添加的新项目

splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

(1)html代码:

<div id="app">
   <ul>
    <li v-for="todo in todos">
     <span>{{ todo.text }}</span>
     <button @click="removeTodo($index)">X</button>
    </li>
   </ul>
  </div>

(2)js代码:

<script>
    new Vue({
     el: '#app',
     data: {
      todos: [
       { text: 'Add some todos' },
       { text: 'Learn JavaScript' },
       { text: 'Learn Vue.js' },
       { text: 'Build Something Awesome' }
      ]
     },
     methods: {
      removeTodo: function (index) {
       this.todos.splice(index, 1);
      }
     }
    })
  </script>

(3)效果展示:

vue.js删除列表中的一行

Javascript 相关文章推荐
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
js post提交调用方法
Feb 12 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
js实现动态显示时间效果
Mar 06 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
vue v-model动态生成详解
Jun 30 #Javascript
vue-router+nginx 非根路径配置方法
Jun 30 #Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 #Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 #Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 #Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 #Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 #jQuery
You might like
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
jquery实现图片预加载
2015/12/25 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
js随机生成一个验证码
2017/06/01 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
Python fileinput模块使用实例
2015/06/03 Python
python实现文件快照加密保护的方法
2015/06/30 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
Python正则表达式经典入门教程
2017/05/22 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
pandas的resample重采样的使用
2020/04/24 Python
Python如何对齐字符串
2020/07/30 Python
资产评估专业大学生求职信
2013/09/29 职场文书
中专生毕业自我鉴定
2013/11/01 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
督导岗位职责范本
2015/04/10 职场文书
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫