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数组中删除元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
babel7.x和webpack4.x配置vue项目的方法步骤
这篇文章主要介绍了babel7.x和webpack4.x配置vue项目的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-05-05vue中使用Cesium加载shp文件、wms服务、WMTS服务问题
这篇文章主要介绍了vue中使用Cesium加载shp文件、wms服务、WMTS服务问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-05-05iview-table组件嵌套input select数据无法双向绑定解决
这篇文章主要为大家介绍了iview-table组件嵌套input select数据无法双向绑定解决示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-09-09
最新评论