Vue数组添加元素的三种实现方式

 更新时间:2025年09月15日 10:35:41   作者:山间漫步人生路  
这篇文章主要介绍了Vue数组添加元素的三种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

1、push() 结尾添加

数组.push(元素)

var node1 = ['111','222']
var new_node = node1.push('aaa')

此时数据为
node1: ['111','222','aaa']

2、unshift() 头部添加

数组.unshift(元素)

var node1 = ['111','222']
var new_node = node1.unshift('aaa')

此时数据为
node1: ['aaa','111','222']

3、splice()

方法向/从数组指定位置添加/删除项目,然后返回被删除的项目。

参数描述
index必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, …, itemX可选。向数组添加的新项目。
 /**
     * Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
     * @param start The zero-based location in the array from which to start removing elements.
     * @param deleteCount The number of elements to remove.
     * @returns An array containing the elements that were deleted.
     */
    splice(start: number, deleteCount?: number): T[];
    /**
     * Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
     * @param start The zero-based location in the array from which to start removing elements.
     * @param deleteCount The number of elements to remove.
     * @param items Elements to insert into the array in place of the deleted elements.
     * @returns An array containing the elements that were deleted.
     */
    splice(start: number, deleteCount: number, ...items: T[]): T[];

例如:

1、删除:删除(任意个数)

  • 参数1:开始的索引
  • 参数2:删除的长度
var node = ['11','22','33','44']
var new_node = node.splice(1,2)
//返回被删除的数组元素
//new_node  输出 ['22','33']
console.log(new_node )
//node输出 ['11','44']
console.log(node)

2、添加(任意个数): 插入起始位置、0(要删除的项数)和要插入的项(不限)

var node = ['11','22','33','44']
//添加splice(start,0,newInfo)--返回值为空数组
var new_node = node.splice(1,0,'aa','bb')
// new_node 输出 []
console.log(new_node)
// node 输出 ['11', 'aa', 'bb', '22', '33', '44']
console.log(node)

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue 函数调用加括号与不加括号的区别

    vue 函数调用加括号与不加括号的区别

    这篇文章主要介绍了vue 函数调用加括号与不加括号的区别,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-10-10
  • Vue computed计算属性详细讲解

    Vue computed计算属性详细讲解

    computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下
    2022-10-10
  • Vue Router的安装使用方法总结

    Vue Router的安装使用方法总结

    在本文中,我们详细讲解了Vue路由的使用方法,我们首先安装了Vue Router,然后创建了一个Vue Router实例,并配置了路由,感兴趣的朋友一起看看吧
    2023-11-11
  • 使用Vue和ECharts创建交互式图表的代码示例

    使用Vue和ECharts创建交互式图表的代码示例

    在现代 Web 应用中,数据可视化是一个重要的组成部分,它不仅能够帮助用户更好地理解复杂的数据,还能提升用户体验,本文给大家使用Vue和ECharts创建交互式图表的示例,需要的朋友可以参考下
    2024-11-11
  • Vue2.x响应式简单讲解及示例

    Vue2.x响应式简单讲解及示例

    这篇文章主要介绍了Vue2.x响应式及简单的示例,应用了简单的源代码进行讲解,感兴趣的小伙伴可以参考一下,希望可以帮助到你
    2021-08-08
  • Vue实现点击图片放大显示功能

    Vue实现点击图片放大显示功能

    这篇文章主要为大家详细介绍了如何利用Vue实现点击图片放大显示功能,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的可以了解一下
    2023-03-03
  • vue3使用elementplus图标方式

    vue3使用elementplus图标方式

    这篇文章主要介绍了vue3使用elementplus图标方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2026-03-03
  • 基于Vue单文件组件详解

    基于Vue单文件组件详解

    下面小编就为大家带来一篇基于Vue单文件组件详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 利用Vue3实现一个可以用js调用的组件

    利用Vue3实现一个可以用js调用的组件

    最近遇到个功能要求,想要在全局中调用组件,而且要在某些js文件内调用,所以这篇文章主要给大家介绍了关于如何利用Vue3实现一个可以用js调用的组件的相关资料,需要的朋友可以参考下
    2021-08-08
  • vue使用html2PDF实现将内容导出为PDF

    vue使用html2PDF实现将内容导出为PDF

    将 HTML 转换为 PDF 进行下载是一个比较常见的功能,这篇文章将通过html2PDF实现将页面内容导出为PDF,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-11-11

最新评论