Vue2学习第九篇：条件渲染

一、条件渲染

1. v-if  

   写法：  

      (1).v-if="表达式"  

      (2).v-else-if="表达式"  

      (3).v-else="表达式"

   适用于：切换频率较低的场景。

   特点：不展示的DOM元素直接被移除。

   注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

 <div v-if="n === 1">Angular</div>
 <div v-else-if="n === 2">React</div>
 <div v-else-if="n === 3">Vue</div>
 <div v-else>hello world</div>

2. v-show（底层就是是否增添属性display：none；并不是把display：none；改成block）  

   写法：v-show="表达式"

   适用于：切换频率较高的场景

   特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

   template只能与v-if配合使用，不能与v-show配合使用，且template不参与编译

<template v-if="n === 1">
  <h2>Angular</h2>
  <h2>React</h2>
  <h2>Vue</h2>
</template>

3. 备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。