當(dāng)前位置:首頁(yè) > IT技術(shù) > 其他 > 正文

2補(bǔ):v-for - 列表渲染的用法 和 他的參數(shù)
2022-05-31 17:12:21

?

因?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開(kāi)始 最后到 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)分開(kāi),那么既然 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é)果:

2補(bǔ):v-for - 列表渲染的用法 和 他的參數(shù)_字段

?

?所以呢 我們加強(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è) 是 索引?! ?/p>

因?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>

2補(bǔ):v-for - 列表渲染的用法 和 他的參數(shù)_javascript_02

?


作者:??咸瑜???



本文摘自 :https://blog.51cto.com/u

開(kāi)通會(huì)員,享受整站包年服務(wù)立即開(kāi)通 >