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

相关文章

  • vue3使用Facebook嵌入式视频播放器API方法详解

    vue3使用Facebook嵌入式视频播放器API方法详解

    这篇文章主要为大家介绍了vue3使用Facebook嵌入式视频播放器API方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Vue生命周期与setup深入详解

    Vue生命周期与setup深入详解

    Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期
    2022-09-09
  • vue,angular,avalon这三种MVVM框架优缺点

    vue,angular,avalon这三种MVVM框架优缺点

    本文给大家具体分析了下vue,angular,avalon这三种MVVM框架优缺点,十分的细致全面,有需要的小伙伴可以参考下
    2016-04-04
  • Antd的Table组件嵌套Table以及选择框联动操作

    Antd的Table组件嵌套Table以及选择框联动操作

    这篇文章主要介绍了Antd的Table组件嵌套Table以及选择框联动操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue 标签属性数据绑定和拼接的实现方法

    vue 标签属性数据绑定和拼接的实现方法

    这篇文章主要介绍了vue 标签属性数据绑定和拼接的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 详解vue为什么要求组件模板只能有一个根元素

    详解vue为什么要求组件模板只能有一个根元素

    这篇文章主要介绍了vue为什么要求组件模板只能有一个根元素,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-07-07
  • VUE+Java实现评论回复功能

    VUE+Java实现评论回复功能

    这篇文章主要为大家详细介绍了VUE+Java实现评论回复功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue实现导出word文档的示例代码

    vue实现导出word文档的示例代码

    这篇文章主要为大家详细介绍了如何使用vue实现导出word文档(包括图片),文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • vue+electron实现创建多窗口及窗口间的通信(实施方案)

    vue+electron实现创建多窗口及窗口间的通信(实施方案)

    这篇文章主要介绍了vue+electron实现创建多窗口及窗口间的通信,本文给大家分享实施方案结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue项目多环境配置(.env)的实现

    vue项目多环境配置(.env)的实现

    最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下
    2021-07-07

最新评论