v-if 和 v-show的区别有哪些以及何时使用

从未转生的史莱姆

已于 2022-09-05 16:54:15 修改

阅读量1.1k

点赞数

文章标签： servlet java jvm

于 2022-09-05 16:52:01 首次发布

本文链接：https://blog.youkuaiyun.com/SYQ15544423296/article/details/126708688

版权

本文探讨了v-if和v-show在Vue中控制元素显示隐藏的不同机制，包括数据安全、程序安全、运行效率及多分支判断的应用，并强调了两者在不同场景下的选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

区别主要是分为以下5点：

1、v-show通过css控制元素显示隐藏，而v-if通过元素的创建很删除描述元素的显示和消失；

2、数据安全：v-show项目中存在用户敏感数据需要保护，只能损失性能提高安全性;

3、程序安全：

a、v-show在程序第一次加载时直接完成元素的创建和渲染操作，然后才完成渲染显示和隐藏操作；

b、 v-if在程序第一加载时就会完成逻辑判断，确认是否需要创建该元素，因此v-if的程序安全性高于v-show；

4、运行效率:v-show的效率高于v-if => 性能优先的情况下，可以小范围进行性能提升；

5、v-if 可以实现多分支连续判断；

  <span v-if="user.sex==0">男</span>
        <!-- <br> -->
        <span v-else-if="user.sex==1">女</span>
        <span v-else>未知</span>