vue- 指令v-if 与指令v-show的区别

快来打我* 2024-04-20 11:08 13阅读 0赞

**区别1：**

**v-if ：可以根据表达式的值在DOM中生成或移除一个元素。**

**v-show:可以根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素被隐藏，此时查看代码时，该元素上会多一个内联样式style=“display:none”。**

测试一：皆为true时

![1048652-20190807231949275-143333124.png][]

测试2：v-if：false时，该标签被彻底移除DOM

![1048652-20190807232132166-479868577.png][]

测试3：皆为false时，v-if所在的标签彻底被移除DOM，v-show增加了内联样式display:none;

![1048652-20190807232415612-1544736371.png][]

测试4：

![1048652-20190807232531854-270972704.png][]

**区别2：**

**v-if:支持<template>语法；**

**v-show:不支持<template>语法**

**测试1：**

**![1048652-20190807233157073-316192826.png][]**

测试2：

![1048652-20190807233319050-1511449565.png][]

**注：一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁切换，则使用v-show更好。**

转载于:https://www.cnblogs.com/liuqingxia/p/11310598.html

[1048652-20190807231949275-143333124.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/800e871078de42fea1b49143243d1735.png
[1048652-20190807232132166-479868577.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2acf3483722f4595b90c6e93de0358e5.png
[1048652-20190807232415612-1544736371.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/30909c7c5bc84e35a168d07914158c74.png
[1048652-20190807232531854-270972704.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e929a66e9af04affa39c8ba978110725.png
[1048652-20190807233157073-316192826.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/247b45afbce74915b704b9564441fe0b.png
[1048652-20190807233319050-1511449565.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2e61ce11be6844f79104247438e98fbf.png