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简单的拖动效果实现原理及示例
Jul 26 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 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大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
解析php常用image图像函数集
2013/06/24 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
Maps Javascript
2007/01/22 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
js格式化时间小结
2014/11/03 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
pycharm的python_stubs问题
2020/04/08 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
佳能英国官方网站:Canon UK
2017/08/08 全球购物
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
2014年会演讲稿范文
2014/01/06 职场文书
幼儿园家长评语
2014/02/10 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
如何使用python包中的sched事件调度器
2022/04/30 Python