Vue 中的列表渲染

let vm = new vue(})

上面是乙個最基礎的列表渲染，在實際開發中，還有很多細節點，為了提公升迴圈的效能，會給迴圈項加乙個唯一的key值。我們可以用index作為唯一的key值。

其實不推薦大家這樣使用index的，因為這樣使用index作為key值，在你頻繁操作dom元素時，會比較費效能，無法充分讓 vue 復用dom。

不用index作為key值，那用什麼作為key呢？一般來說每個資料都有唯一的乙個id，用它來作為key值就行了。

如下： :key="item.id">//key 值就沒有必要使用 index

} ---- }

let vm = new vue(,,]

}})

列表提高效能，要在每一項上帶乙個key值，key值要唯一，且最好不要用index做key值。

往列表項裡面新增內容，只需使用push語法就可以了。

vm.list.push()

有時候會這樣寫

vm.list[4] =

這樣寫其實是有問題的，列表雖然更新了，但是頁面卻沒有更新。這是為什麼呢？

當我們嘗試修改陣列內容的時候，不能通過下標的形式來改變這個陣列，我們只能通過vue 提供的幾個陣列變異方法，來運算元組，才能夠實現，資料發生變化，頁面也能發生變化這種效果。

vue 提供了七種資料變異方法，分別是：push、pop、shift、unshift、splice、sort、reverse

除了使用變異方法，我們還能使用其他方法嗎？改變資料的引用

vm.list = [,,,,]

這時候你會發現，資料變了，頁面也會跟著重新渲染。

如果還有乙個元素需要迴圈，在寫一層迴圈的話，效能肯定會有影響。

:key="item.id">} ---- }

}

let vm = new vue(,,]

}})

很容易就想到，那麼我在外面加一層div不就行了。

:key="item.id">} ---- }

}

let vm = new vue(,,]

}})

這兩段**的區別是，用template渲染的，最外層沒有div，而上面一段，最外層會有乙個div

:key="item.id">} ---- }

}

let vm = new vue(,,]

}})物件的迴圈和陣列一樣，可以通過改變引用方式，更新資料。

除了這種方式之外，那我們還有其他方法更新資料嗎？

全域性方法：vue.set()

let vm = new vue(
}})vue.set(vm.userinfo,'address','beijing')    //通過 vue 提供的 set 方法，可以實現，資料更新，頁面更著更新。

除了直接改變資料的引用，還可以利用 vue 提供的set方法去改變資料

例項方法：vm.$set()

vm.$set(vm.userinfo,'address','beijing')    //通過 vue 提供的 set 方法，可以實現，資料更新，頁面更著更新。

如果useriinfo是個陣列，也可以使用set方法

全域性方法：

let vm = new vue(
})vue.set(vm.userinfo,2,44)

例項方法：

vm.$set(vm.userinfo,2,44)

Vue 中的列表渲染

let vm new vue 上面是乙個最基礎的列表渲染，在實際開發中，還有很多細節點，為了提公升迴圈的效能，會給迴圈項加乙個唯一的key值。我們可以用index作為唯一的key值。其實不推薦大家這樣使用index的，因為這樣使用index作為key值，在你頻繁操作dom元素時，會比較費效能，無法充...

Vue 中的列表渲染

Vue 中的列表渲染

Vue 中的列表渲染

Vue 中的列表渲染

相關推薦