列表渲染
<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)