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数组中删除元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 一篇文章让你看懂封装Axios

    一篇文章让你看懂封装Axios

    axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护,这篇文章主要给大家介绍了关于封装Axios的相关资料,需要的朋友可以参考下
    2022-01-01
  • Vue之使用mockjs生成模拟数据案例详解

    Vue之使用mockjs生成模拟数据案例详解

    这篇文章主要介绍了Vue之使用mockjs生成模拟数据案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • vue webpack打包后图片路径错误的完美解决方法

    vue webpack打包后图片路径错误的完美解决方法

    这篇文章主要介绍了vue webpack打包后图片路径错误的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • vue中实现代码高亮与语法着色的方法介绍

    vue中实现代码高亮与语法着色的方法介绍

    在Vue的开发过程中,我们经常需要展示代码片段或者进行代码高亮与语法着色,Vue提供了多种方式来实现代码高亮与语法着色,本文将为你详细介绍这些方法,需要的朋友可以参考下
    2023-06-06
  • Vue 实现复制功能,不需要任何结构内容直接复制方式

    Vue 实现复制功能,不需要任何结构内容直接复制方式

    今天小编就为大家分享一篇Vue 实现复制功能,不需要任何结构内容直接复制方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue冷门技巧递归组件实践示例详解

    Vue冷门技巧递归组件实践示例详解

    这篇文章主要为大家介绍了Vue冷门技巧递归组件实践示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 详解vue axios二次封装

    详解vue axios二次封装

    这篇文章给大家分享了vue axios二次封装的相关知识点等内容以及实例代码,有兴趣的朋友可以参考学习下。
    2018-07-07
  • 详解Vue的watch中的immediate与watch是什么意思

    详解Vue的watch中的immediate与watch是什么意思

    这篇文章主要介绍了详解Vue的watch中的immediate与watch是什么意思,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • vue对于低版本浏览器兼容问题的解决思路

    vue对于低版本浏览器兼容问题的解决思路

    很多时候使用vue开发的项目,由于无法在低版本浏览器上运行,所以需要解决下,下面这篇文章主要给大家介绍了关于vue对于低版本浏览器兼容问题的解决思路,需要的朋友可以参考下
    2023-02-02
  • 对Vue3中reactive的深入理解

    对Vue3中reactive的深入理解

    这篇文章主要介绍了对Vue3中reactive的深入理解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05

最新评论