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 相关文章推荐
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
js分页代码分享
Apr 28 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
javascript控制台详解
Jun 25 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 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
mysql 全文搜索 技巧
2007/04/27 PHP
PHP关联链接常用代码
2012/11/05 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python数据类型详解(二)列表
2016/05/08 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
python 堆和优先队列的使用详解
2019/03/05 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
介绍一下XMLHttpRequest对象
2012/02/12 面试题
广告设计专业自荐信范文
2013/11/14 职场文书
人事专员职责
2014/02/22 职场文书
房屋出租协议书
2014/04/10 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
金陵十三钗观后感
2015/06/04 职场文书