vue.js删除列表中的一行

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）效果展示：

赞 (0)

相关推荐

  • 基于vue循环列表时点击跳转页面的方法

    1.在data数组里边添加id(说明:我的是虚拟数据) 2.在点击事件上传入id参数,如下: 3.在methods里边添加点击跳转的方法,不要忘记在function后边的括号内传入id,然后判断如果id==1,就跳转那个页面,id==2跳转那个页面. 至此跳转完成. 附加: 点击返回上一页方法: window.history.go(-1);就是返回上一页.(不要忘记在标签上添加click点击事件) returnS:function () { window.history.go(-1); } 以上

  • vue如何通过id从列表页跳转到对应的详情页

    1. 列表页:列表页带id跳转到详情页 详情页:把id传回到后台就可以获取到数据了 2.列表页跳转到详情页并更改详情页的标题 列表页:带id和页面标题的typeid跳转到详情页 详情页:在html绑定标题,获取到传过来的typeid,然后判断typeid是多少对应返回标题. 补充:获取后台的数据,就是去访问的后台的服务器(怎么访问?答:就是你怎么访问网站那样子)然后他有定义到是必须的参数的时候,就是在连接后必须带的参数,才可以获取到后台数据,不是必须的跟在连接后面也不会影响.就如我的第二个例子,

  • Vue2.0 v-for filter列表过滤功能的实现

    使用计算属性app.js var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", &quo

  • vue通过滚动行为实现从列表到详情,返回列表原位置的方法

    vue项目滚动行为 场景:项目中,从列表进入详情,再从详情返回列表时,想直接定位到离开时的位置. 列表页点击某一个进入到详情页: 进入到详情页: 从详情页点击返回到列表页到离开的位置: 实现方式一:html5 history模式 1在路由设置router/index.js中,设置组件的元信息被缓存.(keepAlive:true),并修改mode模式为history. export defaultnewRouter({ mode: 'history' // 默认hash routes: [ //

  • vue实现评论列表功能

    具体代码如下所示: <!DOCTYPE html> <html> <head> <title>简易评论列表</title> <meta charset="utf-8"> <link rel="stylesheet" href="node_modules\bootstrap\dist\css\bootstrap.css" rel="external nofoll

  • vue.js删除列表中的一行

    vue.js删除列表中的一行

    splice(index,num,item1,item2,...,itemX) 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注:index--规定添加/删除项目的位置 num--要删除的项目数量 item--向数组添加的新项目 splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素. 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组. (1)html代码: <div id="ap

  • Vue.js实现列表清单的操作方法

    Vue.js实现列表清单的操作方法

    一.Vue.js简要说明 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时,会自动更新到ViewModel.反之亦然,View与ViewModel之间通过数据双向绑定(data-binding)建立联系,如下图所示 Vue.js通过MVVM模式将视图与数据分成两部分(或者说视图代码与业务逻辑的解耦),因此我们只需关心数据的操作,DOM的视图的更新等一系列事情,V

  • Vue.js 2.0中select级联下拉框实例

    在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用.首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-router+Vuex的全家桶. select首先要区分单选和多选,v-model在select单选和多选上有区别.     select单选实例: <select v-model="fruit"> <option selected valu

  • vue.js删除动态绑定的radio的指定项

    vue.js删除动态绑定的radio的指定项

    上图效果,动态添加绑定radio选项,然后也可以动态删除,右边编辑器删除,左边的视图也对应的删除. 视图代码 view: "<ul><li v-for='option in options'>" + "<input type='radio' :name='groupName'>{{option.text}}" + "</li></ul>", 数据绑定model.options: opti

  • javascript删除Table中的一行的脚本代码

    javascript删除talbe中的一行 function Goto(){} function deleteCurrentRow(obj){ var tr=obj.parentNode.parentNode; var tbody=tr.parentNode; tbody.removeChild(tr); } 流程名称 表单名称 上传附件 操作 请假单1 请假单 不允许 删除 请假单2 请假单 不允许 删除 请假单3 请假单 不允许 删除 请假单4 请假单 不允许 删除 [Ctrl+A 全选 注

  • React实现点击删除列表中对应项

    点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框(不能删错了啊). 先说第一种方法 问题刚上手,首先规划级别:一个输入框和对应删除按钮为一个子组件,整体为父组件即可方便处理. 注意的点:生成的一坨输入框是一个数组,为了准确删掉对应项,生成时要编号.点击删除按钮要反馈对应编号,然后进行删除. 现在的逻辑是:整个待展示列表(由子组件组成的数组)是个st

  • Python简单删除列表中相同元素的方法示例

    本文实例讲述了Python简单删除列表中相同元素的方法.分享给大家供大家参考,具体如下: 去除列表中重复的元素,非常简单,直接上代码: a = [11, 21, 3, 4, 3, 2, 5] b = list(set(a)) print(a) print(b) 运行结果: E:\Program\Python>d.py [11, 21, 3, 4, 3, 2, 5] [2, 3, 4, 5, 11, 21] 看到了吗,结果中确实没有了重复的元素.但是,同时,结果中的元素被按从小到大进行了排序! P

  • Python实现删除列表中满足一定条件的元素示例

    本文实例讲述了Python实现删除列表中满足一定条件的元素.分享给大家供大家参考,具体如下: 从列表中删除满足一定条件的元素. 如:删除一个列表中长度为0的元素,或者删除列表中同时是2和3的倍数的元素. 做过高级语言编程的人想当然的会认为"这很简单",可以如下面的方式来实现: for i in listObj: if(...): listObj.remove(i) 看下一个小例子和结果: a = [1, 2, 3, 12, 12, 5, 6, 8, 9] for i in a: if

  • python删除列表中重复记录的方法

    本文实例讲述了python删除列表中重复记录的方法.分享给大家供大家参考.具体实现方法如下: def removeListDuplicates(seq): seen = set() seen_add = seen.add return [ x for x in seq if x not in seen and not seen_add(x) ] 希望本文所述对大家的Python程序设计有所帮助.

  • Js删除数组中某一项或几项的几种方法(推荐)

    1.js中的splice方法 splice(index,len,[item])    注释:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 index:数组开始下标        len: 替换/删除的长度       item:替换的值,删除操作的话 item为空 如:arr = ['a','b','c','d'] 删除 ----  item不设置 arr.splice(1,1)   //['a','c','d']         删除起始下

随机推荐