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
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/131068.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • redis性能测试,测试并发性能

    redis性能测试,测试并发性能

  • ideavim有什么用_intellij idea社区版

    ideavim有什么用_intellij idea社区版IdeaVim史诗级分享之前就对vim非常着迷,而我本身就是写java代码的,经常使用Idea这个IDE。2019年初,Idea里一个和vim有关的插件,深深的吸引了我,名字叫Ideavim。后来我就开始使用了。用它的时候,idea原本的快捷键很多就会失去自己的效力。需要进行重新映射,我花了一些时间将一些非常常用的快捷键整理收集,然后赋予其ideavim的快捷键。取得了非常不错的效果。使用vim,最大的好处,是减少打代码的时候进行键鼠切换的频率。有一种相当不错流畅感

  • Telerik的RadControls控件(四)

    Telerik的RadControls控件(四)朋友们、同行们通过前面《跟我学Telerik公司的RadControls控件》系列三篇的学习,你一定会内心有一种涌动,有种相见(RadControls)恨晚的感觉。那就一起加入学习RadControls控件的行列,为IT的朋友提供更加明了化的技术大餐,欢迎……  今天我将和你分享另一个更加完美的技术控件(TelerikRadTreeview)控件:  RadTreeview 是一个功

  • JOptionPanel的使用「建议收藏」

    JOptionPanel的使用「建议收藏」java代码JOptionPane.showInputDialog(null, "Please choose a name", "Example 1",    JOptionPane.QUESTION_MESSAGE, null, new Object[] {      "Amanda", "Colin", "Don", "Fred", "Gordon", &quot

  • 待字闺中之巧妙排序分析:[通俗易懂]

    待字闺中之巧妙排序分析:

  • 机器学习网格搜索寻找最优参数[通俗易懂]

    机器学习网格搜索寻找最优参数[通俗易懂]整理一下前阶段复习的关于网格搜索的知识:程序及数据请到github上下载GridSearch练习网格搜索是将训练集训练的一堆模型中,选取超参数的所有值(或者代表性的几个值),将这些选取的参数及值全部列出一个表格,并分别将其进行模拟,选出最优模型。上面是数据集的可视化分布图,具体代码如下:%matplotlibinlineimportpandasaspdimpo…

发表回复

您的电子邮箱地址不会被公开。

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