Vue的条件渲染 --- v-if 、v-else-if 和 v-else 、v-show

v-if

v-if 指令用于条件性地渲染一块内容。
它有更高的切换开销，如果在运行时条件很少改变，则使用 v-if 较好。
HTML代码：

<div id="app">
	<p v-if="seen">你看不见我</p>
</div>

vue.js代码：

<script>
    const app = new Vue({
        el: '#app',
        data: {
            seen: true
        }
    })
</script>

显示效果：

v-else-if 和 v-else

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用。必须紧跟在带 v-if 或者 v-else-if 的元素之后；v-else 指令来表示 v-if 的“else 块”。必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。其存在性质与其他语言的条件语句差不多，只是用法不一样而已。

v-show

与v-if用法差不多，不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
v-show 有更高的初始渲染开销，如果需要非常频繁地切换，则使用 v-show 较好

HTML代码：

<div id="app">
    <div v-if="type === '1'">1</div>
    <div v-else-if="type === '2'">2</div>
    <div v-else-if="type === '3'">3</div>
    <div v-else>Not 1/2/3</div>

    <h1 v-show="hi">Hello Vue! </h1>
</div>

vue.js代码：

<script>
    const app = new Vue({
        el : "#app",
        data : {
            type:"1",
            hi: true
        }
    });
</script>

显示效果：