Vue基础02_v-if和v-show指令

v-if的使用
v-if是vue的一个内部指令用来判断是否加载html的DOM比如模拟用户登录状态,在用户登录后实现用户名称,判断的内部指令
v-else否则,等同于js中的if/else
v-show的使用:
调整css中display属性,DOM已经加载,只是CSS控制没有显示出来。
v-if 和v-show的区别:
v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载。
v-show:调整css dispaly属性,可以使客户端操作更加流畅。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HelloWorld</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-if&v-else&v-show</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">你好,欢迎登陆</div>
        <div v-else>请登录</div>
        <!-- <div v-show="isLogin">你好,欢迎登陆</div> -->

        <!-- v-if 判断是否加载,可以减轻服务器的压力,在需要时加载。 --> 
        <!-- v-show 调整css dispaly属性,可以使客户端操作更加流畅。 -->

    </div>
    <script typt="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                isLogin:true,
            }
        })
    
    
    
    </script>




</body>
</html>
发布了17 篇原创文章 · 获赞 1 · 访问量 397

猜你喜欢

转载自blog.csdn.net/weixin_46146313/article/details/104089233