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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Java获取本机IP

    Java获取本机IP

    2021年6月20日
    97
  • 基于keras的手写数字识别_数字识别

    基于keras的手写数字识别_数字识别一、概述手写数字识别通常作为第一个深度学习在计算机视觉方面应用的示例,Mnist数据集在这当中也被广泛采用,可用于进行训练及模型性能测试;模型的输入为:32*32的手写字体图片,这些手写字体包含0~9数字,也就是相当于10个类别的图片模型的输出:分类结果,0~9之间的一个数下面通过多层感知器模型以及卷积神经网络的方式进行实现二、基于多层感知器的手写数字识别多层感知器的模型如下…

    2025年11月14日
    7
  • ramdisk tmpfs_RAMDISK

    ramdisk tmpfs_RAMDISK原文地址:http://blog.csdn.net/michaelwubo/article/details/47418639为了自己方便记忆学习,将自己重点地方进行标注,感谢作者!目录第一部分:ramfs、tmpfs、rootfs、ramdisk一、什么是ramfs二、什么是tmpfs三、什么是rootfs四、什么是ramdisk第二部分:initrd、in

    2022年9月1日
    5
  • Java文件读写

    Java文件读写1.%g用于输出科学计数法2.用printf输出换行除了’\n’,还可以用’%n’3.File类的几个构造方法:1)File(StringdirectoryPath)2)File(StringdirectoryPath,Stringfilename)3)File(FiledirObj,Stringfilename)4)File(URIuri)注意,这里的对象指的可能是一个…

    2022年7月14日
    15
  • Tomcat安装(详细)

    Tomcat安装(详细)1、Tomcat下载安装​ 1、安装​ (一)Tomcat官网下载​ (二)解压​ (三)配置环境变量​ (四)启动-关闭Tomcat ​ (五)访问测试Tomcat输入http://localhost:8080网页打不开​ 2、了解配置文件及目录结构可以配置启动端口号默认端口号:8080MySQL默认:3306http:80https:443<Connectorport=”8080″protocol=”HTTP/1.1

    2025年11月20日
    5
  • 7月上旬国内网站流量统计TOP5:新浪跻身五强居四

    7月上旬国内网站流量统计TOP5:新浪跻身五强居四

    2021年9月7日
    78

发表回复

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

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