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


相关推荐

  • webstorm 2022.01.13 激活码【2021最新】

    (webstorm 2022.01.13 激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/ide…

    2022年3月31日
    120
  • Attributable_文件属性里没有自定义

    Attributable_文件属性里没有自定义在做项目的时候,用没人写的代码和看Android源码时,经常看attr.xml的使用,每次都不知道是什么意思,今天网上查了些资料,终于明白了,这里做一个笔记,方便以后使用这里与一个关于AttributeSet的应用场景:一个自定义控件的有些属性内容是随着外部条件而动态改变的,forexample:一个自定义的ListView控件,需要在底部添加一个View,而这个View在不同的模块使用

    2025年7月17日
    5
  • SQL报错注入_报错注入原理

    SQL报错注入_报错注入原理目录1报错注入概述2常用的报错注入命令2.2groupby重复键冲突(count()+floor()+rand()+groupby组合)2.2.1groupby重复键冲突的原理及bug演示2.2.2补充:sql语句解析过程2.3XPATH报错2.3.1extractvalue()函数2.3.2updatexml()函数2.4测试失败的命令3报错注入案例3.1操作环境3.2获取敏感信息3.2.1获取数据库名3.2.2获取表名3.2.3获取字段名3.2.4获取字段内

    2022年9月30日
    2
  • WindowsclientC/C++编程规范“建议”——前言

    WindowsclientC/C++编程规范“建议”——前言

    2021年12月14日
    49
  • 内网渗透的步骤_内网渗透思路

    内网渗透的步骤_内网渗透思路0x00Preface内网渗透主要是基于前期外围打点getshell的webserver,通过收集webserver上的信息,然后对其他内网主机进行口令上的攻击,当然也有一些基于漏洞的攻击。内网相关概念这里不再进行介绍,大家可以自行百度,诸如什么是域、域与工作组的区别、什么是DC、什么是AD等。当然,概念是生涩难懂的,结合实际环境会有助于理解。0x01信息收集systeminfo查看系统详细信息,如OS版本、补丁安装情况,可以根据这些信息筛选可利用的漏洞。netstart查看启动进

    2022年9月14日
    3
  • idea2021.02激活码(注册激活)

    (idea2021.02激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月28日
    192

发表回复

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

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