Vue3.x系列 基础指令v-if 条件判断

指令：

v-if/v-else-if/v-else

v-if: 根据表达式真假生成或删除一个元素

当表达式的值为false时 v-if指令不会创建该元素 为true 才会创建该元素

v-show 不管表达式真假 都会创建 显示与否是通过 css display控制

如果 v-if需要控制多个元素的创建或删除 可以用 <template>元素包裹这些元素 然后在 template元素上使用

v-if 有更高的切换开销

v-show 有更高的初始渲染开销

需要非常频繁切换元素的显示和隐藏 使用 v-show 更好，运行时条件很少改变  使用v-if更好

v-if 实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <template v-if="!isLogin">
       <form action="">
           <p>username: <input type="text"></p>
           <p>password: <input type="password"></p>
       </form>
   </template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const vm  = Vue.createApp({
        data(){
            return {
                isLogin:false
            }
        }
    }).mount("#app");
</script>
</body>
</html>

实例2：

<body>
    <div id="app">
       <h3 v-if="ok">冰箱</h3>
       <h3 v-if="no">洗衣机</h3>
       <h3 v-if="num>=100">库存很多</h3>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const vm = Vue.createApp({
            data(){
                return{
                    ok:true,
                    no:false,
                    num:1000
                }
            }
        }).mount('#app');
    </script>
</body>