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 闭包引起的内存泄露问题
Jun 22 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
JS前端加密算法示例
Dec 22 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
JavaScript实现模态对话框实例
Jan 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
PHP5 面向对象程序设计
2008/02/13 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Python生成随机数组的方法小结
2017/04/15 Python
python 上下文管理器使用方法小结
2017/10/10 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
Django使用rest_framework写出API
2020/05/21 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
国际象棋商店:The Chess Store
2018/07/09 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
我的中国梦演讲稿400字
2014/08/19 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
商务考察邀请函模板
2015/02/02 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
php去除数组中为0的元素的实例分析
2021/11/17 PHP
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技