Vue的内置指令：v-if和v-show的区别

目录

v-show

v-if

二者的区别：

实现方式：

性能比较：

v-show

根据表达式的真假值，来显示和隐藏元素

1. <div id="app">

2.         <p>三眼五显仙人</p>

3.         <p v-show="temp">魈kun牙白卡酷一</p>

4.         <p v-show="ok">不敬仙师</p>

5.     </div>

6.     <script>

7.       var vm = new Vue({//创建一个vue实例

8.          el:"#app",  //el是vue实例的属性，用于和dom进行绑定

9.          data:{//data是vue实例的属性，用于配置vue实例的数据

10.            temp :false,   //隐藏

11.            ok:true

12.         }

13.         });

14.         window.setInterval(function() {//每秒闪烁一次

15.           vm.ok =! vm.ok;

16.         },1000)  

17. </script>

v-if

根据表达式的真假值，来动态插入和移除元素

1. <div id="app01">

2. <div v-if="role=='diluc'">

3. <h2>天使馈赠，您几位？</h2>

4. </div>

5. <div v-else-if=" role=='zhongli'">

6. <h2>你有带钱吗？</h2>

7. </div>

8. <div v-else="role=='childe'">

9. <h2>你不会不要我吧。</h2>

10. </div>

11. </div>

12. <script>

13. new Vue({

14. el:'#app01',

15. data:{

16. role:"diluc"

17. }

18. })

19. </script>

二者的区别：

实现方式：

v-show通过样式的display控制标签的显示，在dom中是有 标签的。但是没有显示，而v-if采用的是appendChild来实现的在执行之前dom是没有这个标签的看网页上的渲染效果也可以看出来

 第一个p标签的style样式是display，这个p标签样式的display的值则是在none和inline之间反复横跳

 

 我们一共设置了三个div但是最后dom只有一个

性能比较：

加载性能：v-if加载速度更快，v-show加载速度慢

切换开销：v-if切换开销大，v-show切换开销小

v-if是惰性的，它是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，v-show 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。