v-show和v-for区别

简介: v-show和v-for区别

v-for和 v-show指令都可以控制一个元素的显示和隐藏,它们两个的功能如此相似,那么有什么区别呢?

如果v-if和v-show的值同时为假时,v-if和v-show绑定的元素都不会在页面中显示,

如下所示

1、

 <div v-show="0">1111</div>
 <div v-if="0">222</div>


2、

 

对于``v-show```而言,当取值为假时,生成了这个元素,但却将这个元素通过 display:none 的方式隐藏了这个元素,所以在页面显示的时候就不显示

对于v-if而言,当取值为假时,不会生成这个元素,自然而然的也就不会在页面中显示

那么什么时候该用v-show、什么时候该用v-if呢?

当频繁的要使某些元素隐藏或者出现的时候,应该使用v-show,因为v-if每次使元素隐藏或者出现时,都会将元素重新的的插入或删除从DOM树中,这些操作会产生很大的工作量

但v-show却不会存在这样的情况,因为v-show已经生成了这个元素,只是通过display:none将其隐藏掉了

频繁的需要隐藏和出现就用v-show

相关文章
|
移动开发 安全 JavaScript
uniapp跨域解决
uniapp跨域解决
|
存储 SQL 大数据
带你读《Apache Doris 案例集》—— 01 招商信诺人寿 基于 Apache Doris 统一 OLAP 技术栈实践(1)
带你读《Apache Doris 案例集》—— 01 招商信诺人寿 基于 Apache Doris 统一 OLAP 技术栈实践(1)
345 0
|
SQL 分布式计算 Java
Neo4j导入数据的几种方法
create语句 CREATE (a:Person {name: '张三', sex: '男'}) 如利用create批量写入,这里我使用的是scala+spark,代码如下: object Neo4jConnect { def main(args: Array[String]).
4034 0
|
8月前
|
存储 安全 测试技术
零基础必看!Win10系统重装图文详解+安全下载链接,避坑神器
本教程详细介绍了重装Win10系统的完整流程,包括准备工作、制作启动盘、BIOS设置、系统安装、驱动安装与优化以及常见问题解决。准备工作中需确保U盘容量、下载官方镜像并备份重要数据;通过微PE工具箱制作启动盘;调整BIOS设置以支持U盘启动;使用DiskGenius分区并借助WinNTSetup加载镜像完成安装;最后优化系统性能并解决可能的故障,确保安装顺利进行。
|
SpringCloudAlibaba API 开发者
新版-SpringCloud+SpringCloud Alibaba
新版-SpringCloud+SpringCloud Alibaba
|
9月前
|
数据采集 存储 调度
BeautifulSoup VS Scrapy:如何选择适合的HTML解析工具?
在Python网页抓取领域,BeautifulSoup和Scrapy是两款备受推崇的工具。BeautifulSoup易于上手、灵活性高,适合初学者和简单任务;Scrapy则是一个高效的爬虫框架,内置请求调度、数据存储等功能,适合大规模数据抓取和复杂逻辑处理。两者结合使用可以发挥各自优势,例如用Scrapy进行请求调度,用BeautifulSoup解析HTML。示例代码展示了如何在Scrapy中设置代理IP、User-Agent和Cookies,并使用BeautifulSoup解析响应内容。选择工具应根据项目需求,简单任务选BeautifulSoup,复杂任务选Scrapy。
180 1
BeautifulSoup VS Scrapy:如何选择适合的HTML解析工具?
深入理解Debug断点调试技巧
深入理解Debug断点调试技巧
1007 1
|
JSON 数据格式
Uncaught SyntaxError: JSON.parse: expected property name or '}' at line 1 column 14 of the JSON data问题如何处理
【6月更文挑战第15天】Uncaught SyntaxError: JSON.parse: expected property name or '}' at line 1 column 14 of the JSON data问题如何处理
595 5
|
机器学习/深度学习 人工智能 搜索推荐
未来人工智能在后端开发中的应用前景
随着人工智能技术的不断发展,后端开发领域也迎来了新的机遇与挑战。本文探讨了人工智能在后端开发中的应用前景,分析了其对传统开发模式的影响和未来发展趋势。
|
机器学习/深度学习 人工智能 算法
机器学习中的元强化学习
元强化学习是强化学习与元学习的交叉领域,旨在通过迁移已有知识来提升新任务上的学习效率。
324 2