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实现MD5算法

    Java实现MD5算法MD5算法工具类importjava.security.MessageDigest;/**加密工具**@author刘彦青***/publicclassEncryptUtil{ /**MD5加密 * *@paramjiami *源字符串 *@return加密后的字符串*/ publicfina…

    2022年7月9日
    17
  • Linux下tar解压到当前目录,zip压缩,tar压缩,tar解压[通俗易懂]

    Linux下tar解压到当前目录,zip压缩,tar压缩,tar解压[通俗易懂]很多时候我们需要把文件解压到当前目录,命令如下:tar-zxvfvscode-server-linux-x64.tar.gz-C./有时候很讨厌,因为tar.gz的包里就存在一个与压缩包同名的目录,这种情况的话需要先解压,再拷贝:tar-zxvfvscode-server-linux-x64.tar.gz-C./mvvscode-server-linux-x64/*….

    2022年5月11日
    70
  • route-map的原理及简单应用「建议收藏」

    route-map的原理及简单应用「建议收藏」route-map(路由策略)

    2022年7月1日
    25
  • 使用Taro小程序框架开发一个学习、刷题、论坛、聊天交流的微信小程序

    使用Taro小程序框架开发一个学习、刷题、论坛、聊天交流的微信小程序项目介绍当代大学生上课缺少积极性,学习缺乏效率。同为大学生的我深有体会。所以特别开发出这样一款学习类的微信小程序帮助学生进行学习、巩固知识,同时增加对战PK模块来加强学生们的学习积极性。这是一个为学生提供在线学习课程、题库练习、考试答题、做题PK、上课签到、资料查阅、成绩分析等功能的微信小程序希望大佬们走过路过给个star~技术选型前端:Taro+微信小程序+Echarts后端:…

    2022年9月28日
    0
  • Android ListView 分组效果实现「建议收藏」

    Android ListView 分组效果实现「建议收藏」AndroidListView实现分组的功能,并且点击相应的分组可以对相应的分组展开和收缩。

    2022年7月16日
    8
  • 云原生数据仓库AnalyticDB MySQL版_cloudbase

    云原生数据仓库AnalyticDB MySQL版_cloudbase北京时间2020/5/4青年节,TPC(全球最知名非盈利的数据管理系统评测基准标准化组织)官网正式上线AnalyticDBTPC-DS成绩,AnalyticDB通过严苛的TPC-DS全流程测试,性能QphDS分数为14895566,性价比分数为0.08CNY,相比较基于Spark深度优化版的前世界纪录性能提升29%并且单位成本仅为其1/3,成为TPC-DS官方榜单上全球性能、性价比双双领先的数据仓库,这是继2019/4/26之后再次获得全球领先的成绩!榜单截图如下,详细榜单请参见:TPC-DSRes

    2022年9月15日
    0

发表回复

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

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