?
因為寫著寫著出疑惑了
其實已經(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怎么分清楚誰是誰呢? 這就是我的困惑,所以你嘗試返回來 也是一樣的,索引永遠都是最后一個,所以我們
看一下對象語法型的 來 探究一下 這個 v-for 的參數(shù)是怎么樣來的:
?
我們來個 對象語法型的:
<div?id="app">
????<ul>
????????<li?v-for="(x1,x2,x3)?in?stu1">{{?x1?+?"???|???"?+?x2?+?"??|??"?+?x3?}}</li>
????????<!--?運行的知?Vue自動:?x1?值,?x2?:鍵?,?x3:?索引【永遠是最后的.】???????-->
????</ul>
</div>
<script>
????const?app?=?new?Vue({
????????el:?"#app",
????????data:?{
????????????stu1:{
????????????????name:?'bihu',
????????????????sex:?'男',
????????????????phone:?'8208208821'
????????????}
????????}
????})
</script>
允許結(jié)果:
?
?所以呢 我們加強版:
?
<div?id="app">
????<ul>
????????<li?v-for="(x1,x2,x3)?in?object">{{?x1.name?+?"???|???"?+?x2?+?"???|???"?+?x3}}</li>
????????<!--?運行的知?Vue自動:?x1?值,?x2?:鍵?,?x3:?索引【永遠是最后的.】
?????????????但是!?這里的?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)用位置你可以變通達到一個 想在那里顯示什么 就在那里顯示什么.
?
?
還有就是關(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>
?
作者:??咸瑜???