<div id="message">
<div>
<span v-for="n in 10">{{ n }} </span>
</div>//取整數(shù)---------------------------------1
<div v-for='item in items'>
{{item.name}}
{{item.age}}
</div>
<div v-for="(item,index) in items">
{{index}}//支持索引------------------------2
</div>
<div v-for="it in its">
{{it}}//對象迭代---------------------------3
</div>
<div v-for="(value, key,index) in its">
{{key}}-{{value}}-{{index}}//對象迭代---鍵值對+索引-------4
</div>
</div>
···
new Vue({
el:'#message',
date:{
its:{name:"w",age:"10"},
items:[{name:"w",age:"10"},{name:"o",age:"15"}],//一個(gè)數(shù)組對應(yīng)元素
}
})
為了給 Vue 一個(gè)提示舌狗,以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份鲁驶,從而重用和重新排序現(xiàn)有元素,你需要為每項(xiàng)提供一個(gè)唯一 key 屬性赎线。理想的 key 值是每項(xiàng)都有唯一 id廷没。這個(gè)特殊的屬性相當(dāng)于 Vue 1.x 的 track-by ,但它的工作方式類似于一個(gè)屬性垂寥,所以你需要用 v-bind 來綁定動態(tài)值.建議盡可能使用 v-for 來提供 key 颠黎,除非迭代 DOM 內(nèi)容足夠簡單,或者你是故意要依賴于默認(rèn)行為來獲得性能提升滞项。因?yàn)樗?Vue 識別節(jié)點(diǎn)的一個(gè)通用機(jī)制狭归, key 并不特別與 v-for 關(guān)聯(lián),key 還具有其他用途文判,我們將在后面的指南中看到其他用途过椎。
這是因?yàn)槲覀冇胿-for的時(shí)候 在vue組件上面使用的 這個(gè)時(shí)候 我們需要給它加上 :key=“xxx”
一個(gè)獨(dú)一無二的表示來表示它的唯一性
<router-link v-for="n in 100" :key="n"></router-link>