本文主要是介绍你可能被 Vue 中的 v-show 骗了,它并没有像你想的那样切换 display 的属性,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
你好同学,我是沐爸,欢迎点赞、收藏、评论和关注!
在 Vue 中 v-show
是如何条件性地渲染内容的,你可能知道是通过切换 display 属性实现,但真的跟你想的一样吗?
一、你被骗了吗?
v-show
和 v-if
指令都是用于条件性地渲染一块内容,但表达式的值为真时,显示内容,为假时,隐藏内容。
对于两者的区别,你应该也了如指掌:v-if
是真正的条件渲染;v-show
始终会被渲染,只有 CSS display 属性会被切换。
不知道你是怎么理解 “只有 CSS display 属性会被切换” ?如果你是觉得将 display 的属性,如 “block”、“inline-block”、“flex"等,是在表达式为真时,将它们切换为"none”,在表达式为假时,将它们切换回来。那么,你就被骗了!如果你没有被骗,那就没有继续往下看的必要了。
我们先看下 Vue 官方文档关于 v-show
的介绍。
二、v-show
另一个可以用来按条件显示一个元素的指令是 v-show
。其用法基本一样:
<h1 v-show="ok">Hello!</h1>
不同之处在于 v-show
会在 DOM 渲染中保留该元素;v-show
仅切换了该元素上名为 display
的 CSS 属性。
v-show 不支持在 <template>
元素上使用,也不能和 v-else
搭配使用。
以上内容摘自 Vue 官方文档的 “条件渲染” 章节。上面明确指出,v-show
仅切换了名为 display
的 CSS 属性。
三、拨开迷雾
我们使用简单的代码,对 v-show
进行测试。
App.vue
<script setup>import { ref } from "vue";const msg = ref("hello world");const show = ref(true);
</script><template><div><p v-show="show">{{ msg }}</p><button @click="show = !show">切换</button></div>
</template>
运行到浏览器,并打开开发者工具审查元素,点击"切换"按钮更新 show
的值。
注意观察上面的动图,display 的属性是怎么变化的?是将 “block"切换为"none”,又将"none"切换为"block"吗?
其实,并没有!Vue 真正做的是,在表达式为假时,将 display 的属性设为 “none”,在表达式为真时,将"none"删除。源码中是将 display 属性置为空,style="display:'';"
不会渲染到页面上,元素将采用默认布局方式显示。
好了,分享结束,谢谢点赞,下期再见。
这篇关于你可能被 Vue 中的 v-show 骗了,它并没有像你想的那样切换 display 的属性的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!