Vue2.0 【第一季】第2节 v-if v-else v-show 指令

Vue2.0 【第一季】第2节 v-if v-else v-show 指令
- 第二节 v-if v-else v-show 指令
  - 2.1 v-if指令、v-else指令：
  - 2.2 v-show的使用：
    - v-if 和v-show的区别：

第二节 v-if v-else v-show 指令

2.1 v-if指令、v-else指令：

是vue的一个内部指令，用在html中。
用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。

v-if.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>v-if & v-show & v-else</title>
</head>
<body>
    <h1>v-if 判断是否加载</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">你好：Da0sy</div>  //关键代码
        <div v-else>请登录后操作</div>

    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
               isLogin:true
            }
        })
    </script>
</body>
</html>

浏览器效果：

这里我们在vue的data里定义了isLogin的值，当它为true时，网页就会显示：你好：Da0sy，如果为false时，就显示请登录后操作。

2.2 v-show的使用：

调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

<div v-show="isLogin">你好：Da0sy</div>

v-if 和v-show的区别：

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

Keep moving on!