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的Pager分页器实现代码
Jul 17 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
Vue Element UI自定义描述列表组件
May 18 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
mysql 全文搜索 技巧
2007/04/27 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
详解PHP PDO简单教程
2019/05/28 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
python实现web方式logview的方法
2015/08/10 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
Java语言的优势
2015/01/10 面试题
成人继续教育实施方案
2014/03/01 职场文书
青年志愿者活动方案
2014/08/17 职场文书
企业公益活动策划方案
2014/08/24 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
作风建设年度心得体会
2014/10/29 职场文书
先进个人事迹材料
2014/12/29 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
爱心捐款感谢信
2015/01/20 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书