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 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
js实现网页收藏功能
Dec 17 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
JS实现的合并两个有序链表算法示例
Feb 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
php 图像函数大举例(非原创)
2009/06/20 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
json 实例详细说明教程
2009/10/31 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
python中对list去重的多种方法
2014/09/18 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
python 为什么说eval要慎用
2019/03/26 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
如何处理简单的PHP错误
2015/10/14 面试题
财务部总监岗位职责
2014/03/12 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
新学期主题班会
2015/08/17 职场文书
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle