vue中關於v for的一些使用注意事項

2021-10-08 21:25:38 字數 1356 閱讀 9353

v-for基於乙個陣列渲染列表,下面是一些使用的注意事項

1.使用物件

v-for可以針對於陣列和物件

1⃣️陣列

for=

"(item,index) in array"

:key=

"index"

>

<

/div>

2⃣️物件

for=

"(value,key,index) in data"

:key=

"key"

>

<

/div>

2.key屬性

為了跟蹤到v-for迴圈出來的每個節點,則需要為v-for所在的節點提供乙個唯一的 key 屬性。key屬性的型別只能為string型別或者number型別。

3.應用場景

在專案中,曾經遇到過多層v-for巢狀的情況,**大致如下:

這時,key的值不能全部取相應的 index,不然會報錯。

由於key的屬性可以為string或者是number型別,所以可以取物件或陣列中為string型別的值作為key屬性。

for=

"(value,key,index) in dataobj"

:key=

"key"

>

}<

/p>

for=

"(item,indext) in value"

:key=

"indext"

>

for=

"(i,indexc) in item"

:key=

"i.label"

>

"i.check"

:label=

"i.label"

:disabled=

"disable"

>

<

/el-checkbox>

}<

/span>

<

/div>

<

/div>

<

/div>

<

/template>

export

default,,

],[,

]], salary:[[

]], extra:[[

,,],

[,]]

}}},

computed:}}

}}<

/script>

vue中v for的使用

for item,index in list key index p data 結果 people1 people2 people3for index,value,key in obj p data 結果0 name 哈哈哈1 男2 age 21當他們處於同一節點,v for的優先順序高於v if,...

關於vue學習中的一些

1 jinkey大神的新手入門攻略 3 翻譯的vuejs2官方中文文件 部分報錯處理 1 錯誤一 vue.js?b6db 2611 vue warn unknown custom element did you register the component correctly?for recursi...

關於vue的一些總結

最近學習了一段時間的vue js 除了路由沒用過之外 基本上其他的都用過了 對於vue的一些用法 在此做乙個總結。開始使用vue之前 需要匯入vuejs這個檔案到專案中 在做專案的過程中 我們基本上需要用到的就是vue的雙向繫結 條件與迴圈了 下面先介紹一下vue的雙向繫結 指令 v model v...