Vue：Vue基础知识之利用v-if、v-else语句控制页面文本内容的改变

Vue：Vue基础知识之利用v-if、v-else语句控制页面文本内容的改变

 

 

 

目录

1、v-if、v-else判断语句实例

1、index.html文件

2、v-if.html文件

2、v-show调整css实例

---

 

 

 

1、v-if、v-else判断语句实例

v-if='isLogin'   //类似 if else
v-else   
v-if:是vue 的一个内部指令，指令用在我们的html中。  
v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。

1、index.html文件

    
    
    
    


    
Vue2.0实例
    

    

        
Hello World实例
        
v-if&v-else&v-show
    
    

2、v-if.html文件

    
    
    
    
    


    
v-if&v-else&v-show
    

    

        
        
 你好，Jason Niu
        
您还没有登陆，请登陆！
    
    
    

 

2、v-show调整css实例

在vue的data里定义了isLogin的值，当它为true时，网页就会显示：你好：JSPang，如果为false时，就显示请登录后操作。
v-show ：调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

你好：JSPang

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