vue系列学习笔记_____条件渲染

1.v-if

在Vue.js中，我们使用v-if指令实现同样的功能

<h1 v-if="ok">Yes</h1>

利用v-if控制该元素有还是没有

template v-if

因为v-if是一个指令，需要将它添加到一个元素上，但如果想切换多个元素，可以把一个<template>元素当作包装元素，并在上面使用v-if，最终的渲染结果不会包含它

例如

<template v-if="ok">

        <p></p>

        <h1></h1>

        <span></span>

</template>

2.v-show

v-show是简单的切换元素的css display属性。含有v-show的元素会始终渲染并保持在DOM中。

<h1 v-show="ok">Hello</h1>

 v-show不支持<template>语法

3.v-else

用v-else指令给v-if或v-show添加一个"else块"

<div v-if="Math.random()>0.5">Sorry</div>

<div v-else>Not sorry</div>

v-else元素必须立即跟在v-if或v-show元素的后面--否则它不能被识别

4.v-if 和v-show的区别

v-if是真实的条件渲染，他会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。有更高的切换消耗

v-show只是简单的基于css切换。有更高的初始渲染消耗

需要频繁的切换用v-show，如果在运行时条件不大可能改变用v-if