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、数组的响应式方法
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);
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。