【Vue】条件渲染

v-if

            写法:

                 (1)v-if="表达式"

                 (2)v-else-if="表达式"

                 (3)v-else="表达式"

            适用于：切换频率较低的场景

            特点：不显示的DOM元素直接被移除

            注意： v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”

 v-show

            写法：v-show="表达式"

            适用于：切换频率较高的场景

            特点： 不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

备注：

        使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到

        <!-- 使用v-show做条件渲染 -->
        <h2 v-show="false">你好，{{name}}</h2>
        <h2 v-show="1===1">你好，{{name}}</h2>

        <!-- 使用v-if做条件渲染 -->
        <h2 v-if="false">你好，{{name}}</h2>
        <h2 v-if="1===1">你好，{{name}}</h2>

        <!-- v-else和v-else-if -->
        <div v-if="n===1">晴天</div>
        <div v-else-if="n===2">阴天</div>
        <div v-else="n===3">下雨天</div>


        <script>
            new Vue({
                el: "#app",
                data() {
                    return {
                        name: "煎蛋",
                        n: 1
                    }
                },
            })
        </script>

template与v-if的配合使用

        <!-- v-if与template的配合使用 -->
        <template v-if="n===1">
            <h2>阴天</h2>
            <h2>晴天</h2>
            <h2>下雨天</h2>
        </template>