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指令：

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

• v-if.html代码：

    
    
    


    
v-if 判断是否加载
    

    

        
你好：Da0sy
  //关键代码
        
请登录后操作

    

    

浏览器效果：

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

2.2 v-show的使用：

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

你好：Da0sy

v-if 和v-show的区别：

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