列表渲染

我們用 v-for 指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染。 v-for 指令需要以 item in items 形式的特殊語(yǔ)法， items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名

基本用法：

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

你也可以用 of 替代 in 作為分隔符，因?yàn)樗亲罱咏?JavaScript 迭代器的語(yǔ)法

對(duì)象迭代 v-for：

你也可以用 v-for 通過(guò)一個(gè)對(duì)象的屬性來(lái)迭代

你也可以提供第二個(gè)的參數(shù)為鍵名

第三個(gè)參數(shù)為索引

整數(shù)迭代 v-for：

v-for 也可以取整數(shù)。在這種情況下，它將重復(fù)多次模板

結(jié)果

組件 和 v-for：

在自定義組件里，你可以像任何普通元素一樣用 v-for

然而他不能自動(dòng)傳遞數(shù)據(jù)到組件里，因?yàn)榻M件有自己獨(dú)立的作用域。為了傳遞迭代數(shù)據(jù)到組件里，我們要用 props

不自動(dòng)注入 item 到組件里的原因是，因?yàn)檫@使得組件會(huì)緊密耦合到 v-for 如何運(yùn)作。在一些情況下，明確數(shù)據(jù)的來(lái)源可以使組件可重用

key:

為了給 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 來(lái)綁定動(dòng)態(tài)值

數(shù)組更新檢測(cè):

變異方法：會(huì)改變?cè)紨?shù)組,且會(huì)觸發(fā)視圖更新

push、pop、shift、unshift、splice、sort、reverse

重塑數(shù)組：不會(huì)改變?cè)紨?shù)組,總是返回一個(gè)新數(shù)組

filter、concat、slice

顯示過(guò)濾/排序結(jié)果：

有時(shí)，我們想要顯示一個(gè)數(shù)組的過(guò)濾或排序副本，而不實(shí)際改變或重置原始數(shù)據(jù)。在這種情況下，可以創(chuàng)建返回過(guò)濾或排序數(shù)組的計(jì)算屬性
例如

只要number被修改，則會(huì)出發(fā)計(jì)算屬性eventNumbers進(jìn)行計(jì)算

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的Vue基础之Vue列表渲染的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。