vue 数组添加数据「建议收藏」

vue 数组添加数据「建议收藏」vue数据添加分为三种方法:1.unshift(),2.push(),3.splice()<template> <div> <ul> <liv-for=”(time,index)oflistTable”:key=”index”@click=”copyNew(time,index)”> {{time.id}}{{time.name1}}{{time.name2}}添加 </li> </u

大家好,又见面了,我是你们的朋友全栈君。

vue 数据添加分为三种方法:1.unshift(),2.push(),3.splice()

<template>
  	<div>
		<ul>
		  <li v-for="(time,index) of listTable" :key="index" @click="copyNew(time,index)">
		    {
  
  {time.id}}{
  
  {time.name1}}{
  
  {time.name2}} 添加
		  </li>
		</ul>
	</div>
</template>

<script>
export default {
	 data(){
	    return{
	      listTable:[
	        {id:'1',name1:'a1',name2:'b1'},
	        {id:'2',name1:'a2',name2:'b2'},
	        {id:'3',name1:'a3',name2:'b3'},
	      ],
	    }
	  },
 }
 </script>

1.unshift() //数组头部添加一条新数据

let newList = {
   id:'4'
   name1:'a4',
   name2:'b4',
 }
this.listTable.unshift(newList)  //unshift()在数组头部添加一条数据 
console.log(this.listTable)

2.push() //数组末端添加一条新数据

this.listTable.push(newList)  //push()在数组末端添加一条数据 
console.log(this.listTable)

3.splice() //数组操作

 copyNew(time,index){
   console.log(time)
   let newList = {
     id:time.id,
     name1:time.name1,
     name2:time.name2,
   }
   //第一个参数为需要操作数据的下标,第二个参数为操作添加/删除(0为添加,1为不操作,2为删除,3为删除多条数据),第三个参数可选
   this.listTable.splice(index,0,newList) 
   console.log(this.listTable)
 }

4.concat() // 数组合并

let arrA = [1,2,3]
let arrB = [4,5]
arrA.concat(arrB) // 输出 1,2,3,4,5

let arrC = [6,7]
arrA.concat(arrB,arrC) // 输出 1,2,3,4,5,6,7
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/131068.html原文链接:https://javaforall.net

(0)
上一篇 2022年6月12日 下午10:46
下一篇 2022年6月12日 下午11:00


相关推荐

  • gliffy confluen插件gliffy-confluence-plugin-5.1.ja激活成功教程

    gliffy confluen插件gliffy-confluence-plugin-5.1.ja激活成功教程为什么 80 的码农都做不了架构师 gt gt gt

    2026年3月18日
    2
  • 列式数据库概述_列式数据库多张表

    列式数据库概述_列式数据库多张表阐述列式数据库的基本定义,现状,以及一些开源数据库的性能比较。

    2025年5月23日
    6
  • HTML背景图片设置

    HTML背景图片设置背景:学习前端知识,自己做页面目的:学习前端知识组网图:不涉及工具:vscode1.41.0简介:HTML背景图片设置;HTML背景图片设置background-image:<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><title&gt…

    2022年5月31日
    43
  • 风中有朵雨做的云解析_MySQL comment

    风中有朵雨做的云解析_MySQL comment其实就是告诉mysql解释器,该段命令是否已经结束了,mysql是否可以执行了。默认情况下,delimiter是分号;。在命令行客户端中,如果有一行命令以分号结束,那么回车后,mysql将会执行该命令。DELIMITER$$DROPTRIGGERIFEXISTS`updateegopriceondelete`$$CREATETRIGGER`updateego

    2025年8月11日
    3
  • jar包与war包的区别

    jar包与war包的区别ar包:对于学习java的人来说应该并不陌生。我们也经常使用也一些jar包。其实jar包就是java的类进行编译生成的class文件就行打包的压缩包而已。里面就是一些class文件。当我们自己使用maven写一些java程序,进行打包生成jar包。同时在可以在其他的工程下使用,但是我们在这个工程依赖的jar包,在其他工程使用该jar包也要导入。这是jar的里面的class文件war包:其实就是一个web程序进行打包便于部署的压缩包,里面包含我们web程序需要的一些东西,其中包括web.xml的配

    2022年5月23日
    47
  • 数据库系统原理——概述「建议收藏」

    数据库系统原理——概述「建议收藏」穷则独善其身,达则兼济天下一.什么是数据库狭义:存储数据的仓库广义:可以对数据进行存储和管理的软件以及数据本身统称为数据库数据库是由表、关系、操作组成二.为什么需要数据库几乎所有的应用软件的后台都需要数据库数据存储数据占用空间小,容易持久保存数据库的内容是存储在硬盘上,掉电之后任然存在存储比较安全软件是加密的,只能通过DBMS打开容易维护和升级使用SQL语句方便操作数据数据库移植比较容易简化对数据的操作为将来学习Oracle做准备.

    2025年6月7日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号