?
因為寫著寫著出疑惑了
其實已經(jīng)講過這個，但是他的解析遍歷值可以是數(shù)組也可以是對象語法，所以就出來了這個問題:
我們先試一下遍歷 數(shù)組語法? 這個比較容易點：
<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>
這個沒什么問題啊? 直接解析array 從1開始 最后到 10 ，Vue只一個屬性 就是索引，當(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>
對的！寫法就是 括號括起來 ，然后括號分開，那么既然 item 和 index 叫什么都可以 那Vue怎么分清楚誰是誰呢？ 這就是我的困惑，所以你嘗試返回來 也是一樣的，索引永遠(yuǎn)都是最后一個，所以我們
看一下對象語法型的 來 探究一下 這個 v-for 的參數(shù)是怎么樣來的：
?
我們來個 對象語法型的：
<div?id="app">
????<ul>
????????<li?v-for="(x1,x2,x3)?in?stu1">{{?x1?+?"???|???"?+?x2?+?"??|??"?+?x3?}}</li>
????????<!--?運行的知?Vue自動：?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>
????????<!--?運行的知?Vue自動：?x1?值，?x2?:鍵?，?x3:?索引【永遠(yuǎn)是最后的.】
?????????????但是！?這里的?x1(值)?要指定字段，因為這是?多層對象語法型?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 列表展示中： 多個參數(shù)要用括號括起，逗號分隔， Vue會自動判斷分配：?
第一個是 值 ， 第二個是 鍵 ，第三個 是 索引?！ ?/p>
因為數(shù)組是沒鍵的 所以只能是兩個參數(shù)！
?
當(dāng)多重對象語法的時，一定要指定 值 的字段，Vue會一直打印的，所以那些要你自己變通，搭配，當(dāng)然你也可以只打印 值，已完成全部值的遍歷 ，例如：
<li?v-for="x1?in?object">{{?x1.name?+?"???|???"?+?x1.sex?+?"???|???"?+?x1.phone}}</li>-------------------------------------------------------------------------------------------------------------------------------------------------------------------
?關(guān)于參數(shù)Vue是定死了的 單身調(diào)用位置你可以變通達(dá)到一個 想在那里顯示什么 就在那里顯示什么.
?
?
還有就是關(guān)于對象的 你如果想打印里面的全部值 你可以這樣寫：
<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 