重慶分公司 重慶分公司
Vue.js中列表如何渲染-創(chuàng)新互聯(lián)
這篇文章給大家分享的是有關Vue.js中列表如何渲染的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
站在用戶的角度思考問題，與客戶深入溝通，找到慈利網(wǎng)站設計與慈利網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設計、
成都做網(wǎng)站 、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、
域名注冊 、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務覆蓋慈利地區(qū)。
v-for
可以使用 v-for 指令基于一個數(shù)組渲染一個列表。這個指令使用特殊的語法，形式為item in items，items 是數(shù)據(jù)數(shù)組，item 是當前數(shù)組元素的別名：
示例：
{{ item.message }}
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
}) 在 v-for 塊內(nèi)我們能完全訪問父組件作用域內(nèi)的屬性，另有一個特殊變量 $index，正如你猜到的，它是當前數(shù)組元素的索引：
{{ parentMessage }} - {{ $index }} - {{ item.message }}
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
}) 另外，你可以為索引指定一個別名（如果 v-for 用于一個對象，則可以為對象的鍵指定一個別名）：
{{ index }} {{ item.message }}
從 1.0.17 開始可以使用 of 分隔符，更接近 JavaScript 遍歷器語法：
template v-for
類似于 template v-if，也可以將 v-for 用在 標簽上，以渲染一個包含多個元素的塊。例如：
數(shù)組變動檢測
變異方法
Vue.js 包裝了被觀察數(shù)組的變異方法，故它們能觸發(fā)視圖更新。
被包裝的方法有：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
你可以打開瀏覽器的控制臺，用這些方法修改上例的 items 數(shù)組。例如：example1.items.push({ message: 'Baz' })。
替換數(shù)組
變異方法，如名字所示，修改了原始數(shù)組。相比之下，也有非變異方法，如filter(),concat()和slice()，不會修改原始數(shù)組而是返回一個新數(shù)組。在使用非變異方法時，可以直接用新數(shù)組替換舊數(shù)組：
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
}) 可能你覺得這將導致 Vue.js 棄用已有 DOM 并重新渲染整個列表——幸運的是并非如此。 Vue.js 實現(xiàn)了一些啟發(fā)算法，以大化復用 DOM 元素，因而用另一個數(shù)組替換數(shù)組是一個非常高效的操作。
track-by
有時需要用全新對象（例如通過 API 調(diào)用創(chuàng)建的對象）替換數(shù)組。因為 v-for 默認通過數(shù)據(jù)對象的特征來決定對已有作用域和 DOM 元素的復用程度，這可能導致重新渲染整個列表。但是，如果每個對象都有一個唯一 ID 的屬性，便可以使用 track-by 特性給 Vue.js 一個提示，Vue.js 因而能盡可能地復用已有實例。
例如，假定數(shù)據(jù)為：
{
items: [
{ _uid: '88f869d', ... },
{ _uid: '7496c10', ... }
]
} 然后可以這樣給出提示：
然后在替換數(shù)組 items 時，如果 Vue.js 遇到一個包含_uid: '88f869d'的新對象，它知道它可以復用這個已有對象的作用域與 DOM 元素。
track-by $index
如果沒有唯一的鍵供追蹤，可以使用track-by="$index"，它強制讓 v-for 進入原位更新模式：片斷不會被移動，而是簡單地以對應索引的新值刷新。這種模式也能處理數(shù)據(jù)數(shù)組中重復的值。
這讓數(shù)據(jù)替換非常高效，但是也會付出一定的代價。因為這時 DOM 節(jié)點不再映射數(shù)組元素順序的改變，不能同步臨時狀態(tài)（比如 track-by="$index"
問題
因為 JavaScript 的限制，Vue.js 不能檢測到下面數(shù)組變化：
1.直接用索引設置元素，如vm.items[0] = {}；
2.修改數(shù)據(jù)的長度，如vm.items.length = 0。
為了解決問題 (1)，Vue.js 擴展了觀察數(shù)組，為它添加了一個$set()方法：
// 與 `example1.items[0] = ...` 相同，但是能觸發(fā)視圖更新
example1.items.$set(0, { childMsg: 'Changed!'}) 至于問題 (2)，只需用一個空數(shù)組替換 items。
除了$set()， Vue.js 也為觀察數(shù)組添加了$remove()方法，用于從目標數(shù)組中查找并刪除元素，在內(nèi)部它調(diào)用splice()。因此，不必這樣：
var index = this.items.indexOf(item)
if (index !== -1) {
this.items.splice(index, 1)
} 只用這樣：
this.items.$remove(item) 對象 v-for
也可以使用 v-for 遍歷對象。除了 $index 之外，作用域內(nèi)還可以訪問另外一個特殊變量 $key。
{{ $key }} : {{ value }}
new Vue({
el: '#repeat-object',
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
}) 也可以給對象的鍵提供一個別名：
{{ key }} {{ val }}
在遍歷對象時，是按Object.keys()的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下是一致的。
值域 v-for
v-for 也可以接收一個整數(shù)，此時它將重復模板數(shù)次。
{{ n }}
顯示過濾/排序的結果
有時我們想顯示過濾/排序過的數(shù)組，同時不實際修改或重置原始數(shù)據(jù)。有兩個辦法：
1.創(chuàng)建一個計算屬性，返回過濾/排序過的數(shù)組；
2.使用內(nèi)置的過濾器 filterBy 和 orderBy。
計算屬性有更好的控制力，也更靈活，因為它是全功能 JavaScript。但是通常過濾器更方便，詳細見 API。
感謝各位的閱讀！關于“Vue.js中列表如何渲染”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站 www.cdcxhl.com，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器 、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
http://weahome.cn/article/dpjgis.html
在線咨詢
微信咨詢
電話咨詢
028-86922220（工作日）
18980820575（7×24）
提交需求
返回頂部
重慶分公司
重慶分公司
