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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
javascript 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
vue实现树形菜单效果
Mar 19 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 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
PHP安全技术之 实现php基本安全
2010/09/04 PHP
php中用数组的方法设置cookies
2011/04/21 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
js取消单选按钮选中示例代码
2013/11/14 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
Python中变量交换的例子
2014/08/25 Python
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
小区门卫岗位职责
2013/12/31 职场文书
自我鉴定怎么写
2014/01/12 职场文书
员工安全责任书范本
2014/07/24 职场文书
法制教育演讲稿
2014/09/10 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书