Vue 中的列表渲染
列表渲染
<div id="app">
<div v-for="(item,index) of list" :key="index">
{{item}} ---- {{index}}
</div>
</div>
let vm = new Vue({
el: '#app',
data: {
list: [
"hello","Dell","nice","to","meet","you"
]
}
})
上面是一個最基礎的列表渲染，在實際開發中，還有很多細節點，為了提升迴圈的效能，會給迴圈項加一個 唯一的 key 值 。我們可以用 index 作為唯一的 key 值。
其實不推薦大家這樣使用 index 的，因為這樣使用 index 作為 key 值，在你頻繁操作 dom 元素時，會比較費效能，無法充分讓 Vue 複用 dom 。
key 值
不用 index 作為 key 值，那用什麼作為 key 呢？一般來說每個資料都有唯一的一個 id ，用它來作為 key 值就行了。
如下：
<div id="app">
<div v-for="(item,index) of list"
:key="item.id">//key 值就沒有必要使用 index
{{item.text}} ---- {{index}}
</div>
</div>
let vm = new Vue({
el: '#app',
data: {
list: [
{id: 1, text: 'hello'},
{id: 2, text: 'Dell'},
{id: 3, text: 'Lee'}
]
}
})
列表提高效能，要在每一項上帶一個 key 值， key 值要唯一，且最好不要用 index 做 key 值。
往列表項新增內容
往列表項裡面新增內容，只需使用 push 語法就可以了。
vm.list.push({id: 4,text: 'I am tiantian'})
有時候會這樣寫
vm.list[4] = {id: 4,text: 'I am tiantian'}
這樣寫其實是有問題的，列表雖然更新了，但是頁面卻沒有更新。這是為什麼呢？
當我們嘗試修改陣列內容的時候，不能通過下標的形式來改變這個陣列，我們只能通過Vue 提供的幾個陣列變異方法，來運算元組，才能夠實現，資料發生變化，頁面也能發生變化這種效果。
Vue 提供了七種資料變異方法，分別是： push 、 pop 、 shift 、 unshift 、 splice 、 sort 、 reverse
改變引用
除了使用變異方法，我們還能使用其他方法嗎？改變資料的引用
vm.list = [
{id: 1, text: 'hello'},
{id: 2, text: 'Dell'},
{id: 3, text: 'Lee'},
{id: 4, text: 'I am tiantian'},
]
這時候你會發現，資料變了，頁面也會跟著重新渲染。
迴圈多項
如果還有一個元素需要迴圈，在寫一層迴圈的話，效能肯定會有影響。
<div id="app">
<div v-for="(item,index) of list"
:key="item.id">
{{item.text}} ---- {{index}}
</div>
<span v-for="(item,index) of list"
:key="item.id">
{{item.text}}
</span>
</div>
let vm = new Vue({
el: '#app',
data: {
list: [
{id: 1, text: 'hello'},
{id: 2, text: 'Dell'},
{id: 3, text: 'Lee'}
]
}
})
很容易就想到，那麼我在外面加一層 div 不就行了。
<div id="app">
<div v-for="(item,index) of list"
:key="item.id">
<div>
{{item.text}} ---- {{index}}
</div>
<span>
{{item.text}}
</span>
</div>
</div>
let vm = new Vue({
el: '#app',
data: {
list: [
{id: 1, text: 'hello'},
{id: 2, text: 'Dell'},
{id: 3, text: 'Lee'}
]
}
})
這兩段程式碼的區別是，用 template 渲染的，最外層沒有 div ，而上面一段，最外層會有一個 div
<div id="app">
<template v-for="(item,index) of list"
:key="item.id">
<div>
{{item.text}} ---- {{index}}
</div>
<span>
{{item.text}}
</span>
</template>
</div>
let vm = new Vue({
el: '#app',
data: {
list: [
{id: 1, text: 'hello'},
{id: 2, text: 'Dell'},
{id: 3, text: 'Lee'}
]
}
})
物件中的 set 方法
物件的迴圈和陣列一樣，可以通過改變引用方式，更新資料。
除了這種方式之外，那我們還有其他方法更新資料嗎？
全域性方法： Vue.set()
let vm = new Vue({
el: '#app',
data: {
userInfo: {
name: 'tiantain',
age: 28,
gender: 'male',
salary: 'secrey'
}
}
})
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({
el: '#app',
data: {
userInfo: [1,2,3,4]
}
})
Vue.set(vm.userInfo,2,44)
例項方法：
vm.$set(vm.userInfo,2,44)