一、Vue指令之v-for和key属性
1、迭代数组
<li v-for="(item, i) in list">索引:{{i}} --- 姓名:{{item.name}} --- 年龄:{{item.age}}</li>
2、循环对象数组
<p v-for="(item,i) in list">id:{{item.id}}--姓名:{{item.name}}--年龄:{{item.age}}--索引:{{i}}</p>
list:[
{id:1,name:'zhangsan0',age:12},
{id:2,name:'zhangsan1',age:12},
{id:3,name:'zhangsan2',age:12},
{id:4,name:'zhangsan3',age:12}
]
3、迭代对象中的属性
<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
//i是索引,一般在对象中很少使用
list:{
id:1,
name:'zhangsan',
gender:1,
age:20
}
4、迭代数字,注意是从1开始
<p v-for="item in 10">第{{item}}次循环</p>
二、v-for中key使用的注意事项
2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。
<!--注意:v-for 循环的时候,key 属性只能使用number 或者string-->
<!--注意:key 在使用的时候,必须使用v-bind 属性绑定的形式,指定key 的值-->
<!--在组件中,使用v-for 循环的时候,或者是在一些特殊情况中,如果使用v-for 有问题,必须在使用
v-for 的同时,指定唯一的字符串/数字类型(:key 值)-->
<p v-for="item in list" :key="item.id">
<input type="checkbox"/>
{{item.name}}----{{item.id}}
</p>
三、v-if 和v-show
<!--v-if 的特点:每次都会重新删除或者创建元素-->
<!--v-show 的特点:每次不会重新进行DOM元素的删除或创建,只是将元素的display:none样式切换-->
<!--v-if 有较高的切换性能消耗-->
<!--v-show有较高的初始渲染消耗-->
<!--如果元素设计到较多的切换效果,建议使用v-show-->
<!--如果元素运行条很少改变,那么建议选择v-if-->
<h3 v-if="flag">这是v-if控制的语句</h3>
<h3 v-show="flag">这是v-show控制的语句</h3>