v-show
v-show 如果if后的条件为false,则为false的代码会生成。看如下代码
<div v-show="isQs"></div>
<div v-show="isWs"></div>
data {
isQs:true,
isWs:false
}
打开浏览器F12查看编译后的代码,则
生成,并且在其生成style=“display: none;”v-if
v-if 如果if后的条件为false,则为false的代码不会生成。看如下代码
<div v-if="isQs"></div>
<div v-if="isWs"></div>
data {
isQs:true,
isWs:false
}
打开浏览器F12查看编译后的代码,则
没有生成v-for
普通数组
list:[1,2,3,4,5,6]
<p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p>
对象数组
listObj:[
{id:1, name:'1'},
{id:2, name:'2'},
{id:3, name:'3'},
{id:4, name:'4'},
{id:5, name:'5'},
{id:6, name:'6'},
]
<p v-for="(user,i) in listObj">--id--{{user.id}} --姓名--{{user.name}}</p>
遍历对象
user:{
id:1,
name:'钢铁大侠,
gender:'男'
}
<p v-for="(val,key) in user">--键是--{{key}} --值是--{{val}}</p>
v-for使用的时key的属性必须是String或者number,使用key需要v-bind属性绑定,指定key的值