vue中数组加Key方式
更新时间：2024年03月09日 09:33:54 作者：sqwu
这篇文章主要介绍了vue中数组加Key方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue中数组加Key
代码：
const numberList = list.map(item => ({value: item}))其中 list是原数组，numberList是转化后的数组，value是key的名称
在使用element的el-autocomplete远程搜索组件时，普通的数组不能匹配，需要带有可以的数组才可以。
这是普通数组
转化成key为value的数组：
vue数组操作
1、数组的响应式方法
push(value)：从数组最后面添加元素unshift(value)：从数组最前面添加元素pop()：从数组最后一个元素开始删除shift()：从数组第一个元素开始删除splice(start,deleteCount)：从start开始删除deleteCount个元素splice(start,deleteCount,…value)：从start开始替换deleteCount个元素，后面跟上要替换的元素。splice(start,0,…value)：从start开始插入value,后面跟上要添加的元素。
splice说明：
在进行数组的中间插入操作时，vue是依次替换每一个数，然后再在最后添加一个新空间存储原数组最后的元素。
这样做是很没有效率的，因此在进行数组遍历时，若想从中间插入一条数据，需要使用到key属性。
如：
< li v-for=“item in arrays” :key=“item” >{{ item }}所以，一句话概括，key的作用是为了高效的更新虚拟DOM.
2、数组的非响应式方法
arr[0]=“aaa”，列表不会随着数组的改变而响应式渲染到页面上。
3、数组的高阶函数
类似lambda表达式函数时编程：
filter()：过滤数组，参数传递一个回调函数，回调函数返回true时，函数内部自动讲这次回调的数据保存到新数组中；当回调函数返回false时，函数内部过滤掉该数据。map()：遍历操作数组，参数传递一个回调函数，可在回调函数中操作遍历的每一个数组值，如加减乘除。reduce()：对数组中所有的内容进行汇总。
案例：
对数组进行操作：
- 1，取出小于100的数
- 2，每个数乘2
- 3，汇总
newArray = array.filter(arr => arr < 100).map(arr => arr*2).reduce((arr,num) => arr+num);
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了浅谈Vue.set实际上是什么，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了el-table实现转置表格的示例代码(行列互换),本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-02-02
这篇文章主要介绍了Vue中 key keep-alive的实现原理,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
数独是源自18世纪瑞士的一种数学游戏，是一种运用纸、笔进行演算的逻辑游戏。下面这篇文章主要给大家介绍了关于利用vue开发一个所谓的数独的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-12-12
在当今的数据驱动时代,数据可视化变得越来越重要,它能够帮助我们更直观地理解数据,从而做出更好的决策,在这篇博客中,我们将探索如何使用 Vue 和一些常见的图表库（如 Chart.js）来制作漂亮的数据可视化效果,需要的朋友可以参考下2024-10-10
vue前端获取/切换麦克风、播放采集音频和采集音量大小完整代码
这篇文章主要给大家介绍了关于vue前端获取/切换麦克风、播放采集音频和采集音量大小的相关资料,文中通过图文以及代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue项目实现点击目标区域之外可关闭(隐藏)目标区域，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要为大家介绍了Tree-Shaking 机制的快速掌握教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
使用live-server快速搭建本地服务器+自动刷新的方法
下面小编就为大家分享一篇使用live-server快速搭建本地服务器+自动刷新的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最近因为公司项目问题,开始学习vue,这篇文章主要给大家介绍了关于如何运行vue项目的相关资料,文中还介绍了如何运行别人的项目,需要的朋友可以参考下2022-06-06
最新评论