v-for 遍历数组数字

1.v-for遍历数组

v-for 相当于js for循环,直接写在标签内使用,循环生成标签。例如:

<div v-for="(item,index) in arr">{{item}}<div>

arr 是一个数组

item 代表数组中每一项,

index代表数组的索引

可以在标签内使用数组的元素,如果数组中的每一项还有数组,则可以嵌套多层for循环

2.v-for遍历数组

和v-for使用相似,例如:

<div v-for="(item,index) in 3">{{item}}<div>

但要注意的是:

v-for 遍历数组,索引从0开始,v-for遍历数字索引从1开始

3. v-for v-if 连用

在vue2和vue3中v-for,和v-if 的优先级不同,

vue2 中 v-for的优先级高于v-if,如果v-for 和v-if 在同一个标签内,则会先循环后判断,这样显然不明智,可以在在外层嵌套,template标签,先进行v-if判断,因为template标签是不显示的,所以不用担心结构问题,先判断再进行循环。

在vue3 中 v-if的优先级要高于v-for 先判断后循环减少了循环的次数,提高了渲染性能。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值