vue v-for 循环嵌套的探索（一）

举一个简单的例子：

1、结构部分内容

（1）html 、css部分

 
 

 

{{subtitle.title}}

 
 
 
  {{one}}
 
 
  ----
 
  {{two}}
 
 
 

 

 

（2）数据源

2、循环嵌套的原理

（1）首先考虑最外层的数据是pdata，想要得到subtitle，必须从pdata中获取，即最外层循环体为

        v-for="(subtitle) in pdata.subtitle"             【括号内为要获取的内容】

（2）其次要获取subtitle下的title属性，因title是在subtitle中包含的，故只有通过subtitle才能获取

       

{{subtitle.title}}

          【title无子属性，不用有循环体，可直接通过已有的subtitle获取】

（3）接下来要获取subtitle下的smalltitle的值，获取的是其下全部的值，为一个json对象

       {{smalltitle}}

（4）最后获取subtitle的子属性的值，要通过smalltitle来获取对应的子属性的值，则这部分循环体要嵌套在（3）中

      
    {{one}}

     
----
     
{{two}}
     
     

     

注意：（1）因为subtitle的子属性下还有各自的子属性，故需要各自使用循环来遍历出各自的值。

          （2）使用“------”和“
”标签的位置，结合循环体考虑，此处不做详解，可自行尝试。

          （3）循环获取谁，谁的名就在循环体对应的括号内。【  (one) in smalltitle.one  】

比较有意思的是各自的index的值，目前暂未理解，后续弄明白了再分享。