v-for、v-if、v-show

一、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>