?
因?yàn)閷懼鴮懼鲆苫罅?/p>
其實(shí)已經(jīng)講過(guò)這個(gè)，但是他的解析遍歷值可以是數(shù)組也可以是對(duì)象語(yǔ)法，所以就出來(lái)了這個(gè)問(wèn)題:
我們先試一下遍歷 數(shù)組語(yǔ)法? 這個(gè)比較容易點(diǎn)：
<script?src="js/vue.js"></script>
<div?id="app">
????????<ul>
????????????<!--注意啊?這李的?item?你叫什么都可以?-->
????????????<li?v-for="item?in?array">{{item}}</li>
????????</ul>
</div>
<script>
????const?app?=?new?Vue({
????????el:?"#app",
????????data:{
????????????array:[1,2,3,4,5,6,7,8,9,10]
????????}
????})
</script>
這個(gè)沒(méi)什么問(wèn)題啊? 直接解析array 從1開始 最后到 10 ，Vue只一個(gè)屬性 就是索引，當(dāng)前遍歷的索引，寫法如下：
<div?id="app">
????????<ul>
????????????<!--注意啊?這里的?item??和??index?你叫什么都可以?-->
????????????<li?v-for="(item,index)?in?array">{{?item?+?"?是第?"?+?index?+?"條"?}}</li>
????????</ul>
</div>
<script>
????const?app?=?new?Vue({
????????el:?"#app",
????????data:{
????????????array:[1,2,3,4,5,6,7,8,9,10]
????????}
????})
</script>
對(duì)的！寫法就是 括號(hào)括起來(lái) ，然后括號(hào)分開，那么既然 item 和 index 叫什么都可以 那Vue怎么分清楚誰(shuí)是誰(shuí)呢？ 這就是我的困惑，所以你嘗試返回來(lái) 也是一樣的，索引永遠(yuǎn)都是最后一個(gè)，所以我們
看一下對(duì)象語(yǔ)法型的 來(lái) 探究一下 這個(gè) v-for 的參數(shù)是怎么樣來(lái)的：
?
我們來(lái)個(gè) 對(duì)象語(yǔ)法型的：
<div?id="app">
????<ul>
????????<li?v-for="(x1,x2,x3)?in?stu1">{{?x1?+?"???|???"?+?x2?+?"??|??"?+?x3?}}</li>
????????<!--?運(yùn)行的知?Vue自動(dòng)：?x1?值，?x2?:鍵?，?x3:?索引【永遠(yuǎn)是最后的.】???????-->
????</ul>
</div>
<script>
????const?app?=?new?Vue({
????????el:?"#app",
????????data:?{
????????????stu1:{
????????????????name:?'bihu',
????????????????sex:?'男',
????????????????phone:?'8208208821'
????????????}
????????}
????})
</script>
允許結(jié)果：
?
?所以呢 我們加強(qiáng)版：
?
<div?id="app">
????<ul>
????????<li?v-for="(x1,x2,x3)?in?object">{{?x1.name?+?"???|???"?+?x2?+?"???|???"?+?x3}}</li>
????????<!--?運(yùn)行的知?Vue自動(dòng)：?x1?值，?x2?:鍵?，?x3:?索引【永遠(yuǎn)是最后的.】
?????????????但是！?這里的?x1(值)?要指定字段，因?yàn)檫@是?多層對(duì)象語(yǔ)法型?Vue將一直遍歷此字段的值
?????????-->
????</ul>
</div>
<script>
????const?app?=?new?Vue({
????????el:?"#app",
????????data:?{
????????????object:?{
????????????????stu1:{
????????????????????name:?'bihu',
????????????????????sex:?'男',
????????????????????phone:?'8208208821'
????????????????},?stu2:?{
????????????????????name:?'大佬',
????????????????????sex:?'男',
????????????????????phone:?'18823646885'
????????????????},?stu3:?{
????????????????????name:?'富婆',
????????????????????sex:?'女',
????????????????????phone:?'88888888'
????????????????}
????????????}
????????}
????})
</script>
所以我們得到結(jié)論：
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
Vue的v-for 列表展示中： 多個(gè)參數(shù)要用括號(hào)括起，逗號(hào)分隔， Vue會(huì)自動(dòng)判斷分配：?
第一個(gè)是 值 ， 第二個(gè)是 鍵 ，第三個(gè) 是 索引。
因?yàn)閿?shù)組是沒(méi)鍵的 所以只能是兩個(gè)參數(shù)！
?
當(dāng)多重對(duì)象語(yǔ)法的時(shí)，一定要指定 值 的字段，Vue會(huì)一直打印的，所以那些要你自己變通，搭配，當(dāng)然你也可以只打印 值，已完成全部值的遍歷 ，例如：
<li?v-for="x1?in?object">{{?x1.name?+?"???|???"?+?x1.sex?+?"???|???"?+?x1.phone}}</li>-------------------------------------------------------------------------------------------------------------------------------------------------------------------
?關(guān)于參數(shù)Vue是定死了的 單身調(diào)用位置你可以變通達(dá)到一個(gè) 想在那里顯示什么 就在那里顯示什么.
?
?
還有就是關(guān)于對(duì)象的 你如果想打印里面的全部值 你可以這樣寫：
<div?id="app">
????<ul>
????????<li?v-for="item?in?object">{{item}}</li>????????<!--直接打印出?object?中全部的內(nèi)容-->
????</ul>
????<hr>
????<ul>
????????<li?v-for="item?in?object.stu1">{{item}}</li>???<!--直接打印出?object.stu1?中全部的內(nèi)容-->
????</ul>
</div>
<script>
????const?app?=?new?Vue({
????????el:?"#app",
????????data:?{
????????????object:?{
????????????????stu1:{
????????????????????name:?'bihu',
????????????????????sex:?'男',
????????????????????phone:?'8208208821'
????????????????},?stu2:?{
????????????????????name:?'大佬',
????????????????????sex:?'男',
????????????????????phone:?'18823646885'
????????????????},?stu3:?{
????????????????????name:?'富婆',
????????????????????sex:?'女',
????????????????????phone:?'88888888'
????????????????}
????????????}
????????}
????})
</script>
?
作者：??咸瑜???
APP 