for of遍历数组（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 先判断后循环减少了循环的次数
















，提高了渲染性能 


 


 


 


 


 


 


 


 

。