07-10 02:19 阅读 66

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元素

，通过v-if实现了标签下树。

第一种情况是通过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             
 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             
 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‘>我是5
 4             
 5         
 6         
 7

我们可以看到：

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

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

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

原文：https://www.cnblogs.com/keyeking/p/15258247.html