vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue中数组加Key

vue中数组加Key方式

作者:sqwu

这篇文章主要介绍了vue中数组加Key方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue中数组加Key

代码: 

const numberList = list.map(item => ({value: item}))

 其中 list是原数组,numberList是转化后的数组,value是key的名称

在使用element的el-autocomplete远程搜索组件时,普通的数组不能匹配,需要带有可以的数组才可以。

这是普通数组

转化成key为value的数组:

vue数组操作

1、数组的响应式方法

splice说明:

在进行数组的中间插入操作时,vue是依次替换每一个数,然后再在最后添加一个新空间存储原数组最后的元素。

这样做是很没有效率的,因此在进行数组遍历时,若想从中间插入一条数据,需要使用到key属性。

如:

< li v-for=“item in arrays” :key=“item” >{{ item }}

所以,一句话概括,key的作用是为了高效的更新虚拟DOM.

2、数组的非响应式方法

arr[0]=“aaa”,列表不会随着数组的改变而响应式渲染到页面上。

3、数组的高阶函数

类似lambda表达式函数时编程:

案例:

对数组进行操作:

newArray = array.filter(arr => arr < 100).map(arr => arr*2).reduce((arr,num) => arr+num);

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文