你可能被 Vue 中的 v-show 骗了,它并没有像你想的那样切换 display 的属性

2024-09-02 19:20

本文主要是介绍你可能被 Vue 中的 v-show 骗了,它并没有像你想的那样切换 display 的属性,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

你好同学,我是沐爸,欢迎点赞、收藏、评论和关注!

在 Vue 中 v-show 是如何条件性地渲染内容的,你可能知道是通过切换 display 属性实现,但真的跟你想的一样吗?

一、你被骗了吗?

v-showv-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 的属性的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1130840

相关文章

SQL Server安装时候没有中文选项的解决方法

《SQLServer安装时候没有中文选项的解决方法》用户安装SQLServer时界面全英文,无中文选项,通过修改安装设置中的国家或地区为中文中国,重启安装程序后界面恢复中文,解决了问题,对SQLSe... 你是不是在安装SQL Server时候发现安装界面和别人不同,并且无论如何都没有中文选项?这个问题也

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

spring中的@MapperScan注解属性解析

《spring中的@MapperScan注解属性解析》@MapperScan是Spring集成MyBatis时自动扫描Mapper接口的注解,简化配置并支持多数据源,通过属性控制扫描路径和过滤条件,利... 目录一、核心功能与作用二、注解属性解析三、底层实现原理四、使用场景与最佳实践五、注意事项与常见问题六

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

IDEA中新建/切换Git分支的实现步骤

《IDEA中新建/切换Git分支的实现步骤》本文主要介绍了IDEA中新建/切换Git分支的实现步骤,通过菜单创建新分支并选择是否切换,创建后在Git详情或右键Checkout中切换分支,感兴趣的可以了... 前提:项目已被Git托管1、点击上方栏Git->NewBrancjsh...2、输入新的分支的

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h