vue v-for 迴圈巢狀的探索(一)
舉一個簡單的例子:
1、結構部分內容
(1)html 、css部分
<div class="Classfily" v-for="(subtitle) in pdata.subtitle">
<el-row>
<!--分類-->
<el-col :span="24">
<div class="grid-content bg-purple">
<p class="red">{{subtitle.title}}</p>
<!--{{subtitle.smalltitle}}-->
<span v-for="smalltitle in subtitle.smalltitle">
<span v-for="(one,index) in smalltitle.one" class="orange">
{{one}}
<!----{{index}}-->
</span>
----
<span v-for="(two,index) in smalltitle.two" class="gray">
{{two}}
<!----{{index}}-->
</span>
<br />
</span>
</div>
</el-col>
</el-row>
</div>
<style>
p{margin: 0;}
.orange{
color:orange;
}
.gray{
color: gray;
}
.red{
color: red;
}
</style>
(2)資料來源
<script>
export default {
name: 'engine',
data () {
return {
pdata:{
"subtitle":[
{
"title":'辦公組',
"smalltitle":[
{
"one":'組名1',
"two":['組員1', '組員2','組員3',"組員4","組員5"]
},
{
"one":'組名2',
"two":['組員1', '組員2','組員3',"組員4","組員5"]
}
]
}
]
}
}
}
}
</script>
2、迴圈巢狀的原理
(1)首先考慮最外層的資料是pdata,想要得到subtitle,必須從pdata中獲取,即最外層迴圈體為
v-for="(subtitle) in pdata.subtitle" 【括號內為要獲取的內容】
(2)其次要獲取subtitle下的title屬性,因title是在subtitle中包含的,故只有通過subtitle才能獲取
<p class="red">{{subtitle.title}}</p> 【title無子屬性,不用有迴圈體,可直接通過已有的subtitle獲取】
(3)接下來要獲取subtitle下的smalltitle的值,獲取的是其下全部的值,為一個json物件
<span v-for="smalltitle in subtitle.smalltitle">{{smalltitle}}</span>
(4)最後獲取subtitle的子屬性的值,要通過smalltitle來獲取對應的子屬性的值,則這部分迴圈體要巢狀在(3)中
<span v-for="(one,index) in smalltitle.one" class="orange">
{{one}}
<!----{{index}}-->
</span>
----
<span v-for="(two,index) in smalltitle.two" class="gray">
{{two}}
<!----{{index}}-->
</span>
<br />
注意:(1)因為subtitle的子屬性下還有各自的子屬性,故需要各自使用迴圈來遍歷出各自的值。
(2)使用“------”和“<br />”標籤的位置,結合迴圈體考慮,此處不做詳解,可自行嘗試。
(3)迴圈獲取誰,誰的名就在迴圈體對應的括號內。【 (one) in smalltitle.one 】
比較有意思的是各自的index的值,目前暫未理解,後續弄明白了再分享。