# vue的條件渲染
###### tags: `Java Web-vue`

### v-if與v-else

<!-- v-if和v-else之间不可以插入其他节点 -->
<div v-if="num%2==0" style="width:200px;height:200px;background-color: chartreuse;">&nbsp;</div>

<div v-else="num%2==0" style="width:200px;height:200px;background-color: coral">&nbsp;</div>

div中的數值會跟著v-if/v-else改變

### v-show

<!-- v-show -->
<!-- v-show是通过display属性来控制这个div是否显示 -->
<div v-show="num%2==0" style="width:200px;height:200px;background-color:blueviolet;">&nbsp;</div>

#### 奇數不顯示

#### 偶數顯示
透過改變display來顯示