v-if和v-show的区别

v-if

条件性地渲染一块内容,这块内容只会在指令的表达式返回 truthy值的时候被渲染。

/**truthy(真值)指的是在布尔值上下文中,转换后的值为真的值。所有值都是真值,除非它们被定义为 假值(即除 false、0、""、null、undefined 和 NaN 以外皆为真值)*/

<template> 上的 v-if

因为 v-if 是一个指令,他必须依附于某个元素。但如果我们想要切换不止一个元素呢?在这种情况下我们可以在一个 <template> 元素上使用 v-if,这只是一个不可见的包装器元素,最后渲染的结果并不会包含这个 <template> 元素。

v-show

根据条件展示元素, 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

两者的区别

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。


相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。


一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/241977.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

贝叶斯球快速检验条件独立

贝叶斯球 定义几个术语&#xff0c;描述贝叶斯球在一个结点上的动作&#xff1a; 通过&#xff08;pass through&#xff09;&#xff1a;从当前结点的父结点方向过来的球&#xff0c;可以访问当前结点的任意子结点&#xff08;父->子&#xff09;。从当前节点的子结点方向…

hive(2)

-- 复习 CREATE TABLE IF NOT EXISTS dept_partition ( deptno int, dname string, loc string ) partitioned BY(month string) row FORMAT delimited fields terminated BY \t ; DESC dept_partition; show partitions dept_partition; ALTER TABLE dept_part…

格雷编码(转换与计算)附代码

目录 格雷码对应表 格雷码转换公式 公式1 公式2 代码实现 格雷码对应表 十进制数 4位自然二进制码 4位典型格雷码 0 0000 0000 1 0001 0001 2 0010 0011 3 0011 0010 4 0100 0110 5 0101 0111 6 0110 0101 7 0111 0100 8 1000 1100 9 1001…

SpringSecurityoauth2.0自整理文档

被标记为资源的url不会走用户认证过滤器,所以通过createBefor>AuthFilter添加的过滤器无效 也就是在ResourceServerConfigurerAdapter实现类中配置的资源路径 记录一下手动加载用户和调用系统方法加载用户,以及他们的配置记录一下自动加载用户和自动密码校验的配置获取授权码…

十五、W5100S/W5500+RP2040之MicroPython开发<Modbus示例>

文章目录 1. 前言2. 相关网络信息2.1 简介2.2 指令构成2.3 优点2.4 应用 3. WIZnet以太网芯片4. Modbus TCP通信示例讲解以及使用4.1 程序流程图4.2 测试准备4.3 连接方式4.4 相关代码4.5 烧录验证 5. 注意事项6. 相关链接 1. 前言 在这个智能硬件和物联网时代&#xff0c;Micr…

C语言-第十六周做题总结

id:374 A.求最大值及其下标 题目描述 本题要求编写程序&#xff0c;找出给定的n个数中的最大值及其对应的最小下标&#xff08;下标从0开始&#xff09;。 输入 输入在第一行中给出一个正整数n&#xff08;1<n≤10&#xff09;。第二行输入n个整数&#xff0c;用空格分开…

C++ 获取位域成员的位宽

C 中可以使用位域来节省内存&#xff0c;实现不同长度的数据的存放&#xff0c;例如&#xff1a; struct BF {uint32_t a1 : 4;uint32_t a2 : 5;uint32_t a3 : 6; } bf;结构体变量 bf 大小为 2 Byte&#xff0c;其成员变量 a1, a2, a3 分别占 4&#xff0c; 5&#xff0c; 6 位…

ApsaraMQ Serverless 演进之路,助力企业降本

作者&#xff1a;家泽 ApsaraMQ 与时俱进&#xff0c;砥砺前行 阿里云消息队列从诞生开始&#xff0c;至今已有十余年。今年&#xff0c;阿里云消息产品全面品牌升级为 ApsaraMQ&#xff0c;与时俱进&#xff0c;砥砺前行。 2012 年&#xff0c;RocketMQ 诞生于集团内部&…

测试理论知识八:敏捷开发测试、极限编程测试

1. 敏捷开发模式下的测试 敏捷开发的核心理念&#xff1a; 个体和互动高于流程和工具。 工作的软件高于详尽的文档。 客户合作高于合同谈判。 响应变化高于遵循计划。 2. 敏捷开发的特征 敏捷开发提倡迭代式和增量式的开发模式&#xff0c;并强调测试在其中的重要作用。这…

【Linux系统基础】(4)在Linux上部署Tomcat、Nginx软件

Tomcat安装部署【简单】 简介 Tomcat 是由 Apache 开发的一个 Servlet 容器&#xff0c;实现了对 Servlet 和 JSP 的支持&#xff0c;并提供了作为Web服务器的一些特有功能&#xff0c;如Tomcat管理和控制平台、安全域管理和Tomcat阀等。 简单来说&#xff0c;Tomcat是一个W…

锐捷ssh配置

配置实例 ssh-Server ssh-Server(config)#enable service ssh-server // 启用ssh服务 ssh-Server(config)#username admin privilege 15 password Test123456 // 设置ssh登陆的账户密码 ssh-Server(config)#line vty 0 4 ssh-Server(config-line)#transport input ssh …

线性回归简介

线性回归简介 1、情景描述2、线性回归 1、情景描述 假设&#xff0c;我们现在有这么一张图&#xff1a; 其中&#xff0c;横坐标x表示房子的面积&#xff0c;纵坐标y表示房价。我们猜想x与y之间存在线性关系&#xff1a; y k x b ykxb ykxb 现在&#xff0c;思考一个问题&…

Java final、finally、finalize 有什么区别?

Java final、finally、finalize 有什么区别&#xff1f; final、finally 和 finalize 是 Java 中三个完全不同的概念&#xff0c;分别用于修饰变量、定义异常处理块和垃圾回收。 final&#xff1a; final 是一个关键字&#xff0c;用于修饰类、方法、变量等。被 final 修饰的…

安徽省人民政府关于印发《打造通用人工智能产业创新和应用高地若干政策》通知

安徽省人民政府关于印发《打造通用人工智能产业创新和应用高地若干政策》通知 原文地址 各市、县人民政府&#xff0c;省政府各部门、各直属机构&#xff1a; 现将《打造通用人工智能产业创新和应用高地若干政策》印发给你们&#xff0c;请认真贯彻落实。 安徽省人民政府 2…

纯HTML代码实现给图片增加水印并下载保存到本地

<!DOCTYPE html> <html> <head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width, initial-scale1, maximum-scale1, user-scalableno"/><title>图片水印打码工具-宋佳乐博客</tit…

计算机图形学理论(3):着色器编程

本系列根据国外一个图形小哥的讲解为本&#xff0c;整合互联网的一些资料&#xff0c;结合自己的一些理解。 CPU vs GPU CPU支持&#xff1a; 快速缓存分支适应性高性能 GPU支持&#xff1a; 多个 ALU快速板载内存并行任务的高吞吐量&#xff08;在每个片段、顶点上执行着色…

nn.Embedding()个人记录

维度 import torch.nn as nnembedding nn.Embedding(num_embeddings 10, embedding_dim 256) nn.Embedding()随机产生一个权重矩阵weight&#xff0c;维度为&#xff08;num_embeddings, embedding_dim&#xff09; 输入维度&#xff08;batch_size, Seq_len&#xff09…

winlogbeat收集Windows事件日志传给ELK

服务器部署winlogbeat后&#xff0c;修改winlogbeat.yml: ###################### Winlogbeat Configuration Example ######################### This file is an example configuration file highlighting only the most common # options. The winlogbeat.reference.yml fi…

基于Java+SpringBoot+MyBatis-plus+Vue前后端分离小区管理系统设计与实现2.0

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

力扣日记12.24-【二叉树篇】236. 二叉树的最近公共祖先

力扣日记&#xff1a;【二叉树篇】236. 二叉树的最近公共祖先 日期&#xff1a;2023.12.24 参考&#xff1a;代码随想录、力扣 ps&#xff1a;提前祝 平安夜快乐&#xff01; 236. 二叉树的最近公共祖先 题目描述 难度&#xff1a;中等 给定一个二叉树, 找到该树中两个指定节点…