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 相关文章推荐
Js组件的一些写法
Sep 10 Javascript
cookie的secure属性详解
Apr 08 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
微信小程序进入广告实现代码实例
Sep 19 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文件中bom的PHP代码
2012/03/13 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
JavaScript基础知识之数据类型
2012/08/06 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
浅谈python中set使用
2016/06/30 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
Html5元素及基本语法详解
2016/08/02 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
《中国的气候》教学反思
2014/02/23 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
给病人的慰问信
2015/03/23 职场文书
教师远程研修感悟
2015/11/18 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
python OpenCV学习笔记
2021/03/31 Python
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL