Vue中的条件渲染

v-if

1. 写法：

   1. .v-if='表达式'
   2. .v-else-if='表达式'
   3. .v-else='表达式'

2. 使用场景
   切换频率较低的场景

3. 特点：不展示的dom元素直接被移除

4. 注意：

   1. v-if可以喝v-else-if， v-else一起使用，但要求结构不能被‘打断’
   2. 使用v-if隐藏的元素，可能无法被获取

<div class="red" v-if="counter === 1"></div>
<div class="yellow" v-else-if="counter === 2"></div>
<div class="green" v-else="counter === 3"></div>

v-show

1. 写法： v-show='表达式'
2. 使用场景：切换频率较高的场景
3. 特点： 不展示的dom元素未被移除，仅仅是使用"display='none'"隐藏掉

<div class="red" v-show="counter === 1"></div>