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自带的一些常用方法总结
Sep 03 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 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 在线打包_支持子目录
2008/06/28 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
一段实时更新的时间代码
2006/07/07 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
python 使用get_argument获取url query参数
2017/04/28 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
django删除表重建的实现方法
2019/08/28 Python
python statsmodel的使用
2020/12/21 Python
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
性能测试工程师的面试题
2015/02/20 面试题
师范生的个人求职信范文
2014/01/04 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技