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 相关文章推荐
accesskey 提交
Jun 26 Javascript
javascript 建设银行登陆键盘
Jun 10 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
Angular的事件和表单详解
Dec 26 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
JavaScript 作用域实例分析
Oct 02 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 Javascript
JS代码实现页面切换效果
Jan 10 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
详解no input file specified 三种解决方法
2019/11/29 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
Python中subprocess的简单使用示例
2015/07/28 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
Python callable()函数用法实例分析
2018/03/17 Python
python实现最长公共子序列
2018/05/22 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
怎样声明接口
2014/09/19 面试题
影视制作岗位职责
2013/12/04 职场文书
教师应聘个人求职信
2013/12/10 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
毕业评语大全
2014/05/04 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
感谢信范文大全
2015/01/23 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
vue3获取当前路由地址
2022/02/18 Vue.js