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


相关推荐

  • C语言qsort函数用法

    C语言qsort函数用法qsort函数简介   排序方法有很多种:选择排序,冒泡排序,归并排序,快速排序等。看名字都知道快速排序是目前公认的一种比较好的排序算法。因为他速度很快,所以系统也在库里实现这个算法,便于我们的使用。这就是qsort函数(全称quicksort)。它是ANSIC标准中提供的,其声明在stdlib.h文件中,是根据二分法写的,其时间复杂度为n*log(n)  功能:

    2022年6月23日
    26
  • r语言中plot函数参数含义_plot函数参数

    r语言中plot函数参数含义_plot函数参数plot函数是R语言最基础的函数之一,但是其参数较多,很难记住所有的参数详细用法,这里总结所有参数用法一下,以便查阅。

    2022年10月15日
    3
  • 万方数据知识平台 TFHpple +Xpath解析[通俗易懂]

    万方数据知识平台 TFHpple +Xpath解析

    2022年1月23日
    34
  • springBoot跨域注解@CrossOrigin

    springBoot跨域注解@CrossOriginSpringFramework4.2GA为CORS提供了第一类支持,使您比通常的基于过滤器的解决方案更容易和更强大地配置它。所以springMVC的版本要在4.2或以上版本才支持@CrossOrigin;springBoot跨域注解:@CrossOrigin在controller控制类上方加注解;spring注解@CrossOrigin不起作用的原因1、是s…

    2022年6月29日
    75
  • BOM的介绍_BOM定义

    BOM的介绍_BOM定义BOM的概念BOM(BrowserObjectModel)是指浏览器对象模型。浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口

    2022年8月5日
    3
  • 2021第四届浙江省大学生网络与信息安全竞赛预赛部分Writeup

    2021第四届浙江省大学生网络与信息安全竞赛预赛部分Writeup前言:这次比赛感觉比去年难多了,难题都没解出来,还是太菜了orz。WebCheckin纯签到题,题目给了一个网址,直接burpsuite抓包,在响应头上拿到flagREcrackPYC题目提供python字节码,直接找到关键部分进行人工反编译,脚本如下:”””19174SETUP_LOOP48(to224)176LOAD_NAME11(range)…

    2022年7月13日
    16

发表回复

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

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