一起学习vue（v-for的使用方法）

上一期咱们讲了v-if，v-else，v-else-if的使用方法，这里再提一下，在代码中我们使用v-if语句的时候在v-if和v-else或者v-else-if的中间不要执行其他代码，例如：

今天是周1

            

今天是周2

            

今天是周3

            

今天是周4

在这里执行其他代码会出现错误

            

今天是周5

            

今天是周6

            

今天是周7

            

格式错误

意思就是我们的v-if类型的语法必须是紧挨着的，中间不能插入其他的。

=======================================================================

这期咱们来学习v-for语法，也是和其他语言一样，for循环语句，使用方法也基本一样。

老样子，直接上代码：

    
        
        
        
    
    
        

            

{{title}}

            

{{num}}

            

{{bool}}

            

{{arr[2]}}

            

{{obj.name}}

            

---

            

                
• {{j+":"+i}}

            

            

---

            

                
• {{b}}:{{a}}

            

            

---

            
        

    

我们在上面的h1~h5标签里面输出的只有一个数据，当我们想要输出一个数组里面两个或者多个数据的时候我们就需要运用v-for语句去循环这个代码。

例如：

{{j+":"+i}}

这个语句，我们命名arr数组为i（in arr），定义一个数组j，因为在计算机执行的时候第一个数为0，所以j的起始值为0，j+就是循环加1，":"这个是在这俩数据之间插一个：比如你想插入其他的就是"这里插入其他的"，+i就是数组里面的从第0位置开始执行循环。也就是第一个是111，直到执行到没有数据为止或者我们定义的范围为止。

   

{{b}}:{{a}}

of和in是一样的，两个用法差不多，引用obj数组（of obj），命名为a,b然后我们在盒子里面输出的时候，一定要反着来，大家运行之后看到效果就明白为什么是{{b}}:{{a}}而不是{{a}}:{{b}}了。

到这里，今天的v-for语法就学这么多，如果想要拓展，可以根据这个思路，自己写一个程序运行试试。