一,前言
1.在vue
的指令系统中,v-if
和v-show
用于条件渲染,v-for
用于列表渲染
二,条件渲染:v-if
1.v-if
指令,可以根据条件判断元素渲染与否。
2.v-if
接受一个具有truth
值的表达式,当为true
时元素渲染,反之元素不渲染。
3.相应的还有v-else
和v-else-if
,当v-if
为false
时,渲染v-else
内容。
4.注意,v-else
必须和和v-if
相邻,否则识别不了。
<div v-if="show">show为true时展示</div>
<div v-else>show为false时展示</div>
三,条件渲染:v-show
1.v-show
也可以用来动态渲染元素。
2.v-if
会销毁元素,代价比较大,v-show
只是在css
的display
上控制元素的显隐,代价较小,若要频繁控制显隐时使用v-show
。
3.即使v-show
为false
,元素也是会渲染的
<div v-show="show">show为true时展示</div>
四,数组列表渲染:v-for
1.v-for
指令用于遍历数组或对象来渲染元素
2.遍历数组:v-for="(item,index) of list"
3.其中使用关键字in
或者关键字of
是等价,对于遍历数组of
更符合js
语法习惯
4.item
是数组元素的别名,index
是数组的索引,list
是被遍历的数组。
<div v-for="(item,idx) of arr" :key="item.id">{{item.name}}</div>
五,对象列表渲染:v-for
1.遍历对象:v-for="(value,key,index) in object"
2.其中value
是对象的值,key
是对象的键,index
是遍历的索引2
3.在使用v-for
遍历时,最好给每个元素添加一个key
属性,绑定独一无二的值来提高性能。
<div v-for="(value,key,idx) of obj" :key="item.key">{{key}}:{{value}}</div>