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 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
Vue中computed及watch区别实例解析
Aug 01 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
PHP个人网站架设连环讲(三)
2006/10/09 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
koa源码中promise的解读
2018/11/13 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python for循环及基础用法详解
2019/11/08 Python
如何用JQuery进行表单验证
2013/05/29 面试题
个人应聘自我评价分享
2013/11/18 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
综合测评个人总结
2015/03/03 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS