官方文档：https://v3.cn.vuejs.org/guide/conditional.html#v-if

template标签

template标签类似于微信小程序的block标签，最终渲染时本身不会显示在客户端中，只是为了将多个元素包裹成块，不打乱原有的结构。

template优点

对比用div标签的v-if显示代码块，和template标签的v-if来判断代码块标签

不使用template标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app" >
        <div class="out" v-if="false">
            <h1>我的世界</h1>
            <p>minecragt</p>
            <b>芜湖</b>
        </div>

        <div class="out" v-else>
            <h1>冒险岛</h1>
            <p>maplestory</p>
            <b>wuhu</b>
        </div>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app"
    })
</script>

效果图：

可以看到虽然能实现块状的显示，但是多了一层div标签，这样会打乱结构，影响其他代码的功能，所以这个时候只想要实现隐藏和显示，使用template即可。

使用template标签版本：
12、18使用了template标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app" >
        <template class="out" v-if="true">
            <h1>我的世界</h1>
            <p>minecragt</p>
            <b>芜湖</b>
        </template>

        <template class="out" v-else>
            <h1>冒险岛</h1>
            <p>maplestory</p>
            <b>wuhu</b>
        </template>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app"
    })
</script>

效果如下：

可以看到template不参与页面渲染，因此即实现了组代码的显示隐藏，也没有破坏代码的层级结构。

v-show

v-show也可以隐藏和显示标签内容，但是他和if的区别是：

v-if如果为false，直接从dom结构中删除，所以html代码中根本看不到内容
v-show如果为false，不是直接删去，而是采用css样式对内容进行隐藏

如：第25行代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app" >
        <template class="out" v-if="true">
            <h1>我的世界</h1>
            <p>minecragt</p>
            <b>芜湖</b>
        </template>

        <template class="out" v-else>
            <h1>冒险岛</h1>
            <p>maplestory</p>
            <b>wuhu</b>
        </template>
        <hr>

        <h2 v-show="false">冒险岛2</h2>
    </div>

</body>
</html>
<script>
    new Vue({
        el:"#app"
    })
</script>

可以看到虽然页面不显示，但是内容仍然在DOM体中：