Vue之条件渲染

<div id="root">
        <h1 v-show="false">欢迎来到王者荣耀!!!
        <!-- v-show其实就是调整display的属性，false表示透明 。元素还在-->
        </h1>
        
        <!-- v-else和v-else-if 他们中间不能被其他东西打断 -->
        <h1 v-if="n === 1">Angler!!!</h1>
        <h1 v-else-if="n === 2">react!!!</h1>
        <h1 v-else>vue!!!</h1>
<!-- template模板不会改变源代码的结构（在原码中是没有template的） -->
        <template v-if="n===1">
            <h2>你好</h2>       
            <h2>北京</h2>       
            <h2>哈哈哈哈</h2>       
        </template>
        <!--n自增一个很简单，所以直接写在这个里面-->
        <button @click="n++">点击n自增{{n}}</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                n:0,
            },
        })
    </script>

运行效果如下： 当点击按钮，n的值便会+1，分别对应不同情况，展示不同的文本内容

总结：

1. v-if 适用于切换频率较低的场景，特点是不展示的DOM元素直接被删除，v-if可以和v-else-if 以及v-else来使用，但要求结构不能被打断。

   （1）v-if=“表达式”

   (2) v-else-if=“表达式”

   (3) v-else

2. v-show

   写法 v-show=“表达式”

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

   特点是不展示的DOM元素仅仅是用样式隐藏掉

备注：使用v-if元素可能无法获取到，v-show一定会获取到