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


相关推荐

  • Web前端测试题

    JS题目:在JavaScript中()方法可以对数组元素进行排序。A.add()B.join()C.sort()D.length()答案:http://hovertree.com/ti

    2021年12月22日
    43
  • due for什么意思_due动词的意思

    due for什么意思_due动词的意思问题描述:在使用实验室服务器安装pytorch的时候报错:ERROR:CouldnotinstallpackagesduetoanOSError:[WinError5]拒绝访问。:‘e:\program\anaconda\envs\dai\lib\site-packages\~.rch\lib\asmjit.dll’Considerusingthe–useroptionorcheckthepermissions.原因分析:原因是由于实验室服务器管理时都是用

    2025年9月7日
    8
  • 圣诞节来了,怎能还没有圣诞树呢 快来为心爱的她送上专属的圣诞礼物叭~

    圣诞节来了,怎能还没有圣诞树呢 快来为心爱的她送上专属的圣诞礼物叭~圣诞节来了,怎能没有圣诞树!作为我的粉丝朋友们,我不允许大家还没有专属于自己的圣诞树!我要让大家收到最特别最美丽的圣诞树!

    2022年7月25日
    7
  • 什么是跨域问题?跨域解决问题

    什么是跨域问题?跨域解决问题一 为什么会出现跨域问题 出于浏览器的同源策略限制 同源策略是一种约定 它是浏览器最核心也是最基本的安全功能 如果缺少了同源策略 则浏览器的正常的功能可能会受到影响 跨域收是 Web 是构建在同源策略基础上的 浏览器只是针对同源策略的一种实现 同源策略会阻止一个域的 JavaScript 脚本和另一个域的内容进行交互 所谓同源 即指同一个域 就是两个页面具备同样的协议 protocol 主机 host 和端口号 port 跨域报错的原因请求是跨域的 并不一定会报错 普通的图片请求 css 文件请求是不

    2025年6月12日
    3
  • 可靠性测试的基础知识——可靠性的计算方法

    可靠性测试的基础知识——可靠性的计算方法计算机系统的可靠性从它开始运行(t=0)到某时刻t这段时间内能正常运行的概率,用R(t)表示。失效率指单位时间内失效的元件数与元件总数的比例,以λ表示,当λ为常数时,可靠性与失效率的关系为:R

    2022年7月4日
    27
  • 使用Apache服务部署静态网站

    1.网站服务程序windows系统中默认Web服务程序是IIS(InternetInformationServices),这是一款图形化的网站管理工具,IIS程序不光能提供Web网站服务,还能

    2021年12月28日
    42

发表回复

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

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