Vue中的指令之v-for和key属性

1.迭代数组

<ul>
	<li v-for="(item,i) in list ">索引:{{i}}---姓名:{{item.name}}--年龄:{{item.age}}</li>
</ul>

2.迭代对象中的属性

<div v-for="val,key,i" in userInfo>{{val}}--{{key}}--{{i}}</div>

3.迭代数字

<p v-for="i in 10">这是第{{i}}个标签</p>

注意:2.2.0的版本里,当在组件中使用v-for时,key属性是必须的。
当vue.js用v-for正在更新已渲染过得元素列表时,他默认是“就地复用”策略。如果数据项的顺序被改变,vue将不是移动DOM元素来匹配数据项的顺序,而是简单的复用此处每个元素,并且确保它在特定索引下显示已被渲染过得每个元素。
为了给vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一的key属性。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值