v-for的深层用法

为了提升循环的性能，我们会给循环加上一个唯一的key值，这个key值一定是唯一的

<div id='root'>
　　<div v-for='(item,index) of list' :key='index'>
　　　　{{item}}--{{index}}
　　</div>
</div>

<script>
var vm = new Vue({
　　el:'#root',
　　data:{
　　　　list:['hello','dell','nice','to','meet','you']
　　}
})
</script>

我们一般把index下标作为唯一的key值，完全可以，但是不推荐这样使用index,因为这样是使用index作为key值，在频繁操作dom元素数据的时候，其实它还是比较费性能，他可能让vue没法充分的复用dom节点，所以不建议使用index作为key值，那不使用index作为key值，用什么作为key值呢

一般这个数据不是前端写死的，是后端返回的，后 端返回的时候一般会带一个id类似的字段，这个值是这条数据的唯一标识

<div id='root'>
　　<div v-for='(item,index) of list' :key='item.id'>
　　　　{{item.text}}--{{index}}
　　</div>
</div>

<script>
var vm = new Vue({
　　el:'#root',
　　data:{
　　　　list:[{
　　　　　　id:'01',
　　　　　　text:'hello'
　　　　},{
　　　　　　id:'02',
　　　　　　text:'nice'
　　　　},{
　　　　　　id:'03',
　　　　　　text:'to'
　　　　},{
　　　　　　id:'04',
　　　　　　text:'meet'
　　　　},{
　　　　　　id:'05',
　　　　　　text:'you'
　　　　}]
　　}
})
</script>

这样性能最高

改变数组

当控制台输入vm.list[4]='hha',发现页面没有更新，但确实添加进去了，这是 vue里面不能通过数组下标的形势改变数组，只能通过vue提供的方法改变数组，vue中一共提供了7个便利方法来帮助我们去操作数组

pop():把数组最后一项删除掉
push():从数组最后添加一项
shift():把数组的第一项删除掉
unshift()：给数组添加第一项
splice()：做一些数组的截取
sort()：对数组进行拍素
reverse()：对数组进行取反

现在要去改变数组对第二项内容，那么操作方法是什么呢，只能运用上面的方式

1、 先删除第二项，再在该位置添加一项

vm.list.splice(1,1,{id:'333',text:'dell2'})

2、 去改变数据的引用,将数组list指向另外一个数组，这样也可以

vm.list=['hello','dell1','lee']

循环对象
<div id='root'>
　　<div v-for='(item,key,index) of userInfo'>
　　　　{{item}}--{{key}}--{{index}}
　　</div>
</div>


<script>
var vm = new Vue({
　　el:'#root',
　　data:{
　　　　userInfo:{
　　　　　　name:'Dell',
　　　　　　age:28,
　　　　　　gender:'male',
　　　　　　salary:'secret'
　　　　}
　　}
})
</script>


==>

Dell--name--0
28--age--1
male--gender--2
secret--salary--3

改变对象的内容，如果要改变name的值，直接

vm.userInfo.name='dell1'

如果要给对象添加一个值

vm.userInfo.address='beijign'

这样是不行的，要怎么做呢，还是跟数组一样，用改变引用的方式

vm.userInfo={
　　name:'Dell',
　　age:28,
　　gender:'male',
　　salary:'secret',
　　address:'beijing'
}

猜你喜欢