列表渲染

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

基本用法：

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

你也可以用 of 替代 in 作為分隔符，因為它是最接近 JavaScript 迭代器的語法

對象迭代 v-for：

你也可以用 v-for 通過一個對象的屬性來迭代

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

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

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

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

結(jié)果

組件 和 v-for：

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

然而他不能自動傳遞數(shù)據(jù)到組件里，因為組件有自己獨立的作用域。為了傳遞迭代數(shù)據(jù)到組件里，我們要用 props

不自動注入 item 到組件里的原因是，因為這使得組件會緊密耦合到 v-for 如何運作。在一些情況下，明確數(shù)據(jù)的來源可以使組件可重用

key:

為了給 Vue 一個提示，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有唯一 id。這個特殊的屬性相當(dāng)于 Vue 1.x 的 track-by ，但它的工作方式類似于一個屬性，所以你需要用 v-bind 來綁定動態(tài)值

數(shù)組更新檢測:

變異方法：會改變原始數(shù)組,且會觸發(fā)視圖更新

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

重塑數(shù)組：不會改變原始數(shù)組,總是返回一個新數(shù)組

filter、concat、slice

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

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

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

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

總結(jié)

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

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