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实现动态CSS换肤技术的脚本
Jun 29 Javascript
javascript 关闭IE6、IE7
Jun 01 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 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中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
js格式化时间小结
2014/11/03 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
canvas时钟效果
2017/02/16 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
竞选班长演讲稿400字
2014/08/22 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
keepalived + nginx 实现高可用方案
2022/12/24 Servers