Vue简单指令

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的值