Vue的条件渲染

一、v-if

写法：

1.v-if='表达式'

<h2 v-if='false'>欢迎来到{{name}}</h2>
        <h2 v-if='1===1'>欢迎来到{{name}}</h2>

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

<div v-if='n===1'>a</div>
        <div v-else-if='n===2'>b</div>

3.v-else='表达式'

<div v-else>哈哈</div>

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

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

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

<div v-if='n===1'>a</div>
        <div v-else-if='n===2'>b</div>
        <div v-else-if='n===3'>c</div>
        <div v-else>哈哈</div>

二、v-show

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

<h2 v-show='false'>欢迎来到{{name}}</h2>
        <h2 v-show='1===1'>欢迎来到{{name}}</h2>

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

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

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