VueDay02

条件渲染v-if和v-show的区别

/*
v-if不显示时，第一次直接不渲染，如果内容已经显示将其改为不显示，内容直接从Dom去除,只是渲染一次的用v-if
v-show不显示时，就会改为dispaly:none,但是会渲染在Dom上，反复需要切换的内容用v-show */

1.v-if代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!-- view -->
        <div id="app">
            <h1>用户名:{{username}}</h1>
            <h3 v-if="isVip">用户类型:VIP</h3>
            <!-- v-if和v-else中间不能有其他元素 -->
            <h3 v-else>用户类型:普通类型</h3>
            
            <hr>
            
            <h1>用户允许登录时间</h1>
            
            <h3 v-if="age>18">允许24小时登录</h3>
            <h3 v-else-if="age>14">允许8小时登录</h3>
            <h3 v-else>允许4小时登录</h3>
        </div>
        <div id="app-3">
            <p v-if="seen">现在你看到我了</p>
        </div>
        <script type="text/javascript">
            let app =new Vue({
                el:"#app",
                data:{
                    username:"小明",
                    isVip:true,
                    age:24
                    
                }
            })
            var app3 = new Vue({
                el:'#app-3',
                data:{
                    seen:true
                }
            })
        </script>
    </body>
</html>

2.v-show的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #pane{
                width: 200px;
                height: 200px;
                background: skyblue;
            }
        </style>
    </head>
    <body>
        <!-- v-if如果设置为false元素之间消失没有 -->
        <!-- v-show如果设置为false，是将其性质设置为dispaly:none -->
        <div id="app">
            <div v-show="isShow" id="pane">
                Hellovue
            </div>
            <button @click="showPane">切换显示内容</button>
        </div>
        <script src="js/vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            let app = new Vue({
                el:"#app",
                data:{
                    isShow:true
                },
                methods:{
                    showPane:function(e){
                        console.log(e)
                        app.isShow=!app.isShow;
                    }
                }
            })
            
            /*
            v-if不显示时，第一次直接不渲染，如果内容已经显示将其改为不显示，内容直接从Dom去除,只是渲染一次的用v-if
             v-show不显示时，就会改为dispaly:none,但是会渲染在Dom上，反复需要切换的内容用v-show */
        </script>
    </body>
</html>

 

posted @ 2020-09-09 17:52  peifengyang  阅读(135)  评论(0)    收藏  举报