vue学习（17）条件渲染

//使用v-show做条件渲染
<div v-show="false">欢迎学习vue</div>
// 使用表达式
<div v-show="1===3">欢迎学习vue</div>
//使用v-if做条件渲染
<div v-if="false">欢迎学习vue</div>
// 使用表达式
<div v-if="1===3">欢迎学习vue</div>
//v-else-if,v-else不能被打断
<div v-if="n === 1">angular</div>
//如果插入其他
<div></div>
//下面都不生效
<div v-else-if ="n === 2">react</div>
<div v-else-if="n === 3">vue</div>
<div v-else>哈哈</div>

知识点

1. v-if

• 写法
  (1):v-if="表达式"
  (2):v-else-if="表达式"
  (3):v-else="表达式"
• 适用于：切换频率低的场景。
• 特点：不展示的dom元素直接移除。
• 注意：v-if可以和v-else-if,v-else，一起使用，但是中间不能被打断。

2. v-show

• 写法：v-show="表达式"
• 适用于：切换频率高的场景。
• 特点：未展示的dom元素未被移除，仅仅是使用样式隐藏了。

3. 使用v-if元素不一定能被获取到，使用v-show，元素一定可以被获取到。

备注：使用template标签包裹元素，不会破坏dom结构，但template不能和v-show一起使用。