条件渲染

1. v-show指令

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

2. v-if指令

写法： 1. v-if="表达式"
2. v-else-if="表达式"
3. v-else="表达式"
适用于： 切换频率较低的场景。 特点：不展示的DOM元素直接被移除。
注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能出现中断，需要连续出现。 如果多个元素使用v-if，可以放在一起，使用<template>标签包起来，Vue自动渲染页面的时候自动拆开template标签，只展示template内的元素。

提示

使用v-if时，相关元素可能无法获取到(因为v-if是false的时候，页面没有相关DOM节点)，而使用v-show一定可以获取到。

html部分

<div id="editor">
    <template v-if="info ==1">
        <h3>hello</h3>
        <h3>vue</h3>
        <h3>test</h3>
    </template>
</div>

js部分

<script>
Vue.config.productionTip=false
const vm = new Vue({
    el: "#editor",
    data() {
        return {
            info: 1
        }
    }
});
</script>