vue.js 条件渲染

v-if

v-if指令用于条件地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。

也可以用v-else添加一个else块。

<h1 v-if='awesome'>Vue is awesome!</h1>

<h1 v-if='awesome'>Vue is awesome!</h1>
<h1 v-else>Oh no</h1>

在<template>元素上使用v-if条件渲染分组 

首先，大家可以先思考这样一个问题，如果要对3个p进行条件渲染，该怎么办呢？

<p v-if="ok">p1</p>
<p v-if="ok">p2</p>
<p v-if="ok">p3</p>

 这样写代码的灵活性差，耦合度高。因此，可以考虑在<template>元素上使用v-if条件。

<template v-if="ok">
    <h1>Title</h1>
    <p>p1</p>
    <p>p2</p>
</template>

但<template>元素是当做不可见的包裹，最终的渲染结果不包含<template>元素。

v-show

另外一个用于根据条件展示元素的选项是v-show指令。

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

不同的是带有v-show的元素始终被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display。

注意：v-show不支持<template>元素，也不支持v-else。

v-if vs v-show 

v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做—直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show简单得多—不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。