Vue基础-for循环

v-for循环分为三种：整数循环、数组循环和对象循环

作用 ： 控制HTML元素中的循环，实现语句列表的生成

用法 ： v-for = “item in items”或 v-for = “item of items”，其中item指集合的子项，items指被遍历的元素，通常为数组

用处 ： 写在谁上边，谁遍历

整数循环

举例-1 ：

    

        
{{n}}
    

运行结果：

举例-2 ： 可以动态传入需要循环的整数的个数

    

        
{{n}}
    

运行结果：

数组循环

举例-1 ： 可以使用of代替in来使用

    

        
{{item}}
    

运行结果：

举例-2 ： 可以有第二个可选参数作为当前项的索引值

    

        
当前索引：{{index}}，当前项：{{item}}
    

运行结果：

对象循环

举例-1 ： 默认循环遍历value的值

    

        {{ value }}
    

运行结果：

举例-2 ： 可以有第二个参数作为key

    

       {{key}}: {{ value }}
    

运行结果：

举例-3 ： 可以提供第三个参数作为index

        

           当前索引{{index}},当前键： {{key}}，当前键对应的值： {{ value }}
        
    
    

运行结果：

另外，值得注意的是，当v-for和v-if同时存在于同一个元素上的时候，v-for的优先级是高于v-if的，这就使得在进行v-for循环遍历每一项时，v-if都会操作一次，不过，这会让你在渲染某些特定的项目时很方便。

举例说明 ： 当v-for和v-if同时使用

 

        

            {{ item }} : {{ index }}
        
    
    

运行结果：

转载：

作者：椰果粒

链接：https://www.jianshu.com/p/60d46b0a3ebc

來源：简书