2018/09/18 VUE 列表渲染

一.用v-for把一個(gè)數(shù)組對(duì)應(yīng)為一組元素

v-for指令需要以item in items形式的特殊語(yǔ)法诸尽,items是源數(shù)據(jù)數(shù)組并且item是數(shù)組元素迭代的別名。


重點(diǎn): 在v-for塊中,我們擁有對(duì)父作用域?qū)傩缘耐耆L問(wèn)權(quán)限。v-for還支持一個(gè)可選的第二個(gè)參數(shù)為當(dāng)前項(xiàng)的索引。

也可以使用 of 替代 in


二. 一個(gè)對(duì)象的v-for屬性迭代


注意: 在遍歷對(duì)象時(shí),是按照object.keys()遍歷的, 但不能保證他的結(jié)果在不同的JavaScript引擎下是一樣的


三. key

當(dāng) Vue.js 用v-for正在更新已渲染過(guò)的元素列表時(shí),它默認(rèn)用“就地復(fù)用”策略鞠鲜。如果數(shù)據(jù)項(xiàng)的順序被改變,Vue 將不是移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序断国, 而是簡(jiǎn)單復(fù)用此處每個(gè)元素贤姆,并且確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素。這個(gè)類(lèi)似 Vue 1.x 的track-by="$index"稳衬。

這個(gè)默認(rèn)的模式是高效的庐氮,但是只適用于不依賴(lài)子組件狀態(tài)或臨時(shí) DOM 狀態(tài) (例如:表單輸入值) 的列表渲染輸出


為了給VUE一個(gè)提示,需要給每個(gè)節(jié)點(diǎn)一個(gè)特殊的標(biāo)志, 需要為沒(méi)項(xiàng)提供一個(gè)唯一的key屬性,key類(lèi)似于屬性

,需要用v-bind綁定動(dòng)態(tài)值


盡量使用-for提供的key,,,,,,,,,,,,,,key是VUE識(shí)別節(jié)點(diǎn)的通用機(jī)制

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末宋彼,一起剝皮案震驚了整個(gè)濱河市弄砍,隨后出現(xiàn)的幾起案子仙畦,更是在濱河造成了極大的恐慌,老刑警劉巖音婶,帶你破解...
    沈念sama閱讀 206,378評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件慨畸,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡衣式,警方通過(guò)查閱死者的電腦和手機(jī)寸士,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)碴卧,“玉大人弱卡,你說(shuō)我怎么就攤上這事∽〔幔” “怎么了婶博?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,702評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)荧飞。 經(jīng)常有香客問(wèn)我凡人,道長(zhǎng),這世上最難降的妖魔是什么叹阔? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,259評(píng)論 1 279
  • 正文 為了忘掉前任挠轴,我火速辦了婚禮,結(jié)果婚禮上耳幢,老公的妹妹穿的比我還像新娘岸晦。我一直安慰自己,他們只是感情好睛藻,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布启上。 她就那樣靜靜地躺著,像睡著了一般修档。 火紅的嫁衣襯著肌膚如雪碧绞。 梳的紋絲不亂的頭發(fā)上府框,一...
    開(kāi)封第一講書(shū)人閱讀 49,036評(píng)論 1 285
  • 那天吱窝,我揣著相機(jī)與錄音,去河邊找鬼迫靖。 笑死院峡,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的系宜。 我是一名探鬼主播照激,決...
    沈念sama閱讀 38,349評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼盹牧!你這毒婦竟也來(lái)了俩垃?” 一聲冷哼從身側(cè)響起励幼,我...
    開(kāi)封第一講書(shū)人閱讀 36,979評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎口柳,沒(méi)想到半個(gè)月后苹粟,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡跃闹,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2 323
  • 正文 我和宋清朗相戀三年嵌削,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片望艺。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡苛秕,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出找默,到底是詐尸還是另有隱情艇劫,我是刑警寧澤,帶...
    沈念sama閱讀 33,703評(píng)論 4 323
  • 正文 年R本政府宣布啡莉,位于F島的核電站港准,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏咧欣。R本人自食惡果不足惜浅缸,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望魄咕。 院中可真熱鬧衩椒,春花似錦、人聲如沸哮兰。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,262評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)喝滞。三九已至阁将,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間右遭,已是汗流浹背做盅。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留窘哈,地道東北人吹榴。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像滚婉,于是被迫代替她去往敵國(guó)和親图筹。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容