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


相关推荐

  • usb调试授权窗口出不来_usb调试是什么意思

    usb调试授权窗口出不来_usb调试是什么意思前段时间在玩Vysor这个Chrome扩展时遇到的一个问题:就是我在Chrome安装了Vysor扩展,但是Vysor跟我的手机老是连不上,提示我要开USB调试模式,但我的手机USB调试模式早已经打开,而且也选过“永久性授权”。-关闭USB调试再开也不行-更改连接方式也不行(MTP/PTP)-断开跟PC链接,然后撤销所有授权,再连上PC,也不见有弹出“USB调试…

    2022年9月2日
    3
  • Tomcat下载安装并部署到IDEA的教程(附带idea两种热部署设置方法)

    这篇文章主要介绍了Tomcat下载安装并部署到IDEA的教程(附带idea两种热部署设置方法),本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

    2022年3月13日
    126
  • vbs代码之“电脑系统崩溃”「建议收藏」

    vbs代码之“电脑系统崩溃”「建议收藏」熟练掌握vbs脚本,可以让你…我也不知道。具体操作:新建文本文档,将本段代码复制进入文本,保存;将后缀.txt改为.vbs即可。codeCreateObject(“SAPI.SpVoice”).Speak”你的电脑受到ddos木马攻击,系统严重瘫痪,电脑系统将在三秒后崩溃”setWshShell=WScript.CreateObject(“WScript.Shell”)WScript.Sleep2000CreateObject(“SAPI.SpVoice”).Speak”电脑系统已

    2022年5月27日
    31
  • 0元搭建卡盟主站_哪个卡盟平台好

    0元搭建卡盟主站_哪个卡盟平台好设置桶配额功能说明设置桶的配额值,单位为字节,支持的最大值为263-1,配额值设为0表示桶的配额没有上限。方法定义1.ObsClient->setBucketQuota(array$parameter)2.ObsClient->setBucketQuotaAsync(array何查看桶标签://引入依赖库require’vendor/autoload.php’;//…

    2022年8月13日
    4
  • 看这里!2021年Java开发突破20k有哪些有效的路径?绝对干货[通俗易懂]

    看这里!2021年Java开发突破20k有哪些有效的路径?绝对干货[通俗易懂]前言微服务是近年来备受关注的话题,相比于传统的SOA而言,更容易理解,也更容易实践,它将“面向服务”的思想做得更加彻底。有人说它非常好,但就是“玩不起”,why?微服务是一种分布式系统架构,它建议我们将业务切分为更加细粒度的服务,并使每个服务的责任单一且可独立部署,服务内部高内聚,隐含内部细节,服务之间低耦合,彼此相互隔离。此外,我们根据面向服务的业务领域来建模,对外提供统一的API接口。微服务的思想不只是停留在开发阶段,它贯穿于设计、开发、测试、部署、运维等软件生命周期阶段。可见,我们提到的微服务,

    2022年7月8日
    17
  • JAVA中的数组插入与删除指定元素

    JAVA中的数组插入与删除指定元素今天学了Java的数组,写了数组的插入和删除,本人小白,写给不会的小白看,大神请忽略,有错请大家指出来;/**给数组指定位置数组的插入*/importjava.util.*;publicclassArrayInsert{publicstaticvoidmain(String[]args){System.out.println(“请用键

    2022年6月26日
    54

发表回复

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

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