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 相关文章推荐
几个javascript操作word的参考代码
Oct 26 Javascript
js几个验证函数代码
Mar 25 Javascript
js 图片等比例缩放代码
May 13 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
Ajax基础知识详解
Feb 17 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
vue 限制input只能输入正数的操作
Aug 05 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 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
List Installed Software Features
2007/06/11 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
Python当中的array数组对象实例详解
2019/06/12 Python
Python命令行click参数用法解析
2019/12/19 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
python实现PCA降维的示例详解
2020/02/24 Python
python数据预处理方式 :数据降维
2020/02/24 Python
python对XML文件的操作实现代码
2020/03/27 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
我们的节日端午节活动方案
2014/03/02 职场文书
法律六进活动方案
2014/03/13 职场文书
商场消防安全责任书
2014/07/29 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
离婚协议书格式
2014/11/21 职场文书
水浒传读书笔记
2015/06/25 职场文书