这篇文章主要介绍“Vuejs如何从数组中删除元素”,在日常操作中,相信很多人在Vuejs如何从数组中删除元素问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”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>//引入jqueryexport 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如何从数组中删除元素”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!