条件渲染

条件渲染

1.v-if
写法:
(1)v-if='表达式'
（2）v-else-if='表达式'
（3）v-else='表达式'
适用于：切换频率较低的场景
特点：不展示的dom元素直接被移除
注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断
2.v-show
写法:v-show='表达式'
适用于：切换频率较高的场景
特点：不展示的dom元素未被移除掉，仅仅是使用样式隐藏掉
3.备注：使用v-if时，元素可能无法获取到，但使用v-show一定可以获取到

 <div id="root">
            <h2 v-show="true">当前的n值是{{n}}</h2>
            <button @click  = "n++">点我n+1</button>

            

            <!-- 使用v-show做条件渲染 -->
            <!-- <h2 v-show="true">欢迎来到{{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">object-c</div>
             <div  v-else-if="n === 2">vue</div>
             <div  v-else-if="n === 3">java</div>
             <div  v-else>哈哈哈</div> -->

             <!-- v-if和template的配合使用 -->
             <template v-if="n  === 1">
                <h2>你好</h2>
                <h2>清华</h2>
                <h2>北京</h2>
             </template>
             
         </div>
        <script type="text/javascript">
             Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

              const vm = new Vue({
                 el:"#root",
                 data:{
                     name:"北京大学",
                     n:0
                 },
             })
        </script>