条件渲染

v-show

隐藏元素，但是在网页源码中的结构仍然存在
例如：

<body>
    <div id="root">
        <h1>这是数字{{n}}</h1>
        <h1 v-show="n===1">我出现了</h1>
        <h1 v-show="n===1">我还出现</h1>
        <h1 v-show="n===1">我再出现</h1>
        <button @click="n++">点我数字变大</button>
    </div>    
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            n:0
        }
    })
</script>

结果：

v-if

隐藏元素，但是结构在源码中不再存在。(相当于在DOM中把这个节点删除了)

所以在需要隐藏大量的结点的时候，最好使用show效率更高。频繁的操作增删DOM节点的效率肯定不及第一种效率高。

既然存在v-if那么也会存在v-else-if、v-else，他们的语义和if、else if、else是一样的。

例如：

<body>
    <div id="root">
        <h1>这是数字{{n}}</h1>
        <h1 v-if="n===1">我出现了</h1>
        <h1 v-else-if="n===1">我还出现</h1>
        <h1 v-else-if="n===1">我再出现</h1>
        <button @click="n++">点我数字变大</button>
    </div>    
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            n:0
        }
    })
</script>

结果：

将三者组合：

<body>
    <div id="root">
        <h1>这是数字{{n}}</h1>
        <h1 v-if="n===1">我出现了</h1>
        <h1 v-else-if="n===1">我还出现</h1>
        <h1 v-else-if="n===1">我再出现</h1>
        <h1 v-else>我最先出现</h1>
        <button @click="n++">点我数字变大</button>
    </div>    
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            n:0
        }
    })
</script>