Vuejs从数组中删除元素的示例代码
更新时间:2023年02月01日 16:06:22 作者:ZNineSun
这篇文章主要介绍了Vuejs从数组中删除元素的示例代码,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
Vuejs从数组中删除元素
使用方法:arr.splice(arr.indexOf(ele),length):表示先获取这个数组中这个元素的下标,然后从这个下标开始计算,删除长度为length的元素 这种删除方式适用于任何js数组
eg:
<template> <div class="users"> <button type="button" class="btn btn-danger" v-on:click="deleteUser(user)"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除</button> </div> </template> <script> //引入jquery export default { data(){ return { users:[ { name:'zx', age:18, addrress:'江苏南京', email:'1773203101@qq.com', contacted:false, }, { name:'zhiyi', age:19, addrress:'中国北京', email:'1773203101@qq.com', contacted:false, }, { name:'zhuxu', age:20, addrress:'中国上海', email:'1773203101@qq.com', contacted:false, }, ] } }, methods:{ deleteUser:function(user){ //表示先获取这个元素的下标,然后从这个下标开始计算,删除长度为1的元素 this.users.splice(this.users.indexOf(user),1); } } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <!--scope只会影响到当前组件的样式--> <style scoped> </style>
补充:vue 删除数组中的某一条数据
一、删除普通数组
let arr = [1,2,3,4,5]; //方法一 let index = arr.indexOf('3'); arr.splice(index, 1) //打印结果 [1,2,4,5] //方法二 let index = arr .findIndex(item => { if (item == '3') { return true } }) arr.splice(index, 1) //打印结果 [1,2,4,5]
二、删除数组对象
let arr = [ { id:1, name:'张三' }, { id:2, name:'李四' }, { id:3, name:'王二' }, { id:4, name:'麻子' }, ]; let id1 = arr.findIndex(item => { if (item.id == '3') { return true } }) arr.splice(id1, 1)
三、欢迎添加更多方法,以上是我觉得最简单的方法
到此这篇关于Vuejs从数组中删除元素的文章就介绍到这了,更多相关vue数组中删除元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue,angular,avalon这三种MVVM框架优缺点
本文给大家具体分析了下vue,angular,avalon这三种MVVM框架优缺点,十分的细致全面,有需要的小伙伴可以参考下2016-04-04vue+electron实现创建多窗口及窗口间的通信(实施方案)
这篇文章主要介绍了vue+electron实现创建多窗口及窗口间的通信,本文给大家分享实施方案结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2022-09-09
最新评论