vue条件渲染和列表渲染

一，前言

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>