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);
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了elementUI弹窗里的表单重置不生效问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了Element Backtop回到顶部的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要为大家详细介绍了vue实现经典选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue将data恢复到初始状态 && 重新渲染组件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
渲染器用于完成渲染操作,比如在浏览器平台上渲染器可以将虚拟DOM转换为真实DOM,本文将通过一个简单例子来带大家理解Vue中渲染器的工作过程,并通过代码示例讲解的非常详细,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了vue+element UI中如何给指定日期添加标记问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
不过 Vue 本身含有非常丰富的功能，要用 Vue 搭建完整的应用，仍然需要了解大量 Vue 设计概念和操作技巧。这篇文章主要介绍了Vue.js 十五分钟入门图文教程,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了VueX如何实现数据共享问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了Vue+abp微信扫码登录的实现代码示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
关于iview按需引用后使用this.$Modal报错的解决
这篇文章主要介绍了关于iview按需引用后使用this.$Modal报错的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论