计算机网络/计算机科学与应用/系统/运维/开发

v-for 循环渲染数组/对象

一、v-for遍历数组

该指令需要使用item in items形式的语法,其中,items为数据对象中的数组名称,item为数组元素的别名,通过别名可以获取当前数组遍历的每个元素


image.png


二、v-for遍历对象

遍历对象使用value in object形式的语法,其中,object为对象名称,value为对象属性值的别名


v-for指令遍历对象时,还可以使用第二个参数为对象属性名(键名)提供一个别名,语法格式为(value,key) in object

其中,object为对象名称,value为对象属性值的别名,key为对象属性名的别名


v-for指令遍历对象时,还可以使用第三个参数为对象提供索引,语法格式为(value,key,index)in object

其中,object为对象名称,value为对象属性值的别名,key为对象属性名的别名,index为对象的索引


image.png


v-for获取索引,键

v-for指令遍历数组时,还可以指定一个参数作为当前数组元素的索引,语法格式为(item,index) in items。

其中,items为数组名称,item为数组元素的别名,index为数组元素的索引。


image.png


三、v-for遍历整数

image.png


四、template渲染多个元素内容

与v-if指令类似,如果需要对一组元素进行循环,可以使用<template>元素作为包装元素,并在该元素上使用v-for


image.png


五、数组更新检测

push() 向数组末尾添加一个或者多个元素

pop() 将数组中的最后一个元素从数组中删除

shift() 将数组中第一个元素从数组中删除

unshift() 向数组的开头添加一个或多个元素

splice() 添加或删除数组中的元素

sort() 对数组的元素进行排序

reverse() 颠倒数组中元素的顺序


image.png

学会在学习中寻找乐趣,学会乐在其中并保持热情

评论

^