v-if和v-show的区别

？#

于 2022-10-10 18:59:57 发布

阅读量92

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_48156583/article/details/127250024

版权

本文阐述了Vue中v-if与v-show指令的区别。v-if是惰性的，仅在条件为真时渲染元素；v-show始终渲染元素，仅切换display属性。适合不同场景使用。并分享了v-show不生效的实际案例。

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

v-if和v-show都是通过条件成立与否来控制标签元素的显示与隐藏

区别：

v-if是惰性的，当条件成立才会真正渲染标签。每一次的条件真假切换时，该标签都会进行创建和销毁。适用于不需要频繁切换元素显示和隐藏的情况

v-show是在初始化渲染时就把该标签渲染，条件真假切换只是对display进行none和展示的切换，并没有对该标签进行创建和销毁。适用于需要频繁切换元素的显示和隐藏的场景

讲一下我在用v-show时不生效的原因》》没有修改到true或false

在uni.$on('',function(result) {})里给data中的变量赋值，在页面卸载时打印发现没有改变值，所以v-show还是false，所以不生效
把function改成=>后能成功赋值data中的变量
uni.$on('', (result) => {
	this.test = true  //此时成功赋值data中的变量
})