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 sortable效果 代码有错但值得看看
Nov 05 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 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
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php UBB 解析实现代码
2011/11/27 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
深入php内核之php in array
2015/11/10 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
vue实现通讯录功能
2018/07/14 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
聊聊python中的循环遍历
2020/09/07 Python
扩大国家免疫规划实施方案
2014/03/21 职场文书
校园活动宣传方案
2014/03/28 职场文书
内勤岗位职责
2015/02/10 职场文书
亮剑观后感600字
2015/06/05 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
Mysql 如何查询时间段交集
2021/06/08 MySQL
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android