vue指令之v-if和v-show

vue指令的作用是通过带有v-的特殊属性，实现对dom的响应式加载。

v-if

v-if的作用是通过一个布尔表达式进行对dom的上树和下树的渲染。

 1     

 2        
if="true">我是第一行dom元素
 
 3        
if="false">我是第二行dom元素
 4     
 5     
 6     

此时我们可以看到：

页面中没有

我是第二行dom元素

第一种情况是通过data带有布尔值的进行渲染。

 1     

 2         
if="boo">我是第一行dom元素
 3         
if="!boo">我是第二行dom元素
 4     
 5     
 6     

此时我们可以看到页面中依旧没有

我是第二行dom元素

 第二种情况是通过使用表达式进行逻辑判断

 1 

 2         
 3         
{{boo}}
 4         
 5             
if="boo == 5">我是第一行dom元素
 6             按我加1
 7         
 8         
 9         

此时可以看到：

v-if的显示根本原理一个是通过对值的隐式转换，一个就是通过对表达式的判断得出的布尔值得来的。

 1     

 2         
{{boo}}
 3         
if='boo >= 0 && boo <= 5'>我是5
 4         
if='boo >= 6 && boo <= 10'>我是10
 5         
if='boo >= 11 && boo <= 15'>我是15
 6         
if='boo >= 16 && boo <= 20'>我是20
 7         
if="boo > 20">我是大于20
 8         按我加1    
 9     
10     
11     

此时可以看到：

上面的代码是通过v-if一层一层进行判断的，实际上是可以通过v-else-if和v-else进行分支判断

1 
if='boo >= 0 && boo <= 5'>我是5
2 
else-if='boo >= 6 && boo <= 10'>我是10
3 
else-if='boo >= 11 && boo <= 15'>我是15
4 
else-if='boo >= 16 && boo <= 20'>我是20
5 
else="boo > 20">我是大于20

注意：v-else的使用前提是必须先有v-if并且中间不允许有任何的元素间隔

 我们在中间插入一个div标签

1  　　　　 
if='boo >= 0 && boo <= 5'>我是5
2         

3         
else-if='boo >= 6 && boo <= 10'>我是10
4         
else-if='boo >= 11 && boo <= 15'>我是15
5         
else-if='boo >= 16 && boo <= 20'>我是20
6         
else="boo > 20">我是大于20

 后面的代码便不再显示了

v-show

v-show和v-if的显示情况类似，但是原理不一样，v-show是通过控制元素的display属性，对元素的显示和隐藏进行逻辑判断，并没有实现元素的下树。

 1  

 2             
{{boo}}
 3             
我是5
 4             按我加1
 5         
 6         
 7         

我们可以看到：

 p标签的属性为display：none，所以不显示。

什么时候用v-if、什么时候使用v-show

v-show和v-if的使用场景区分是如果页面切换的特别频繁使用v-show，如果页面的涉及范围特别大并且不是特别频繁的切换使用v-if，因为主要区分是涉及到页面的加载性能。