Vue指令之v-show与v-if

在Vue中,v-showv-if是两个功能非常相近的Vue指令,当其值为1的时候,所在容器就会显示,否则不会显示。

定义一个style box,设置其长、宽、间距宽度、边缘线、文本对齐方式、边缘线圆角、阴影和行间距如下,这段代码是CSS格式,但可以放在html文件的<style>标签中。

.box{width: 200px;height: 100px;margin: 10px;border: 3px solid #000;text-align: center;border-radius: 5px;box-shadow: 2px 2px 2px #ccc;line-height: 100px;}

将该style作为class传入后续定义的容器中,定义两个容器,分别由v-showv-if控制:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 100px;margin: 10px;border: 3px solid #000;text-align: center;border-radius: 5px;box-shadow: 2px 2px 2px #ccc;line-height: 100px;}</style>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><div id="app"><div v-show="flag" class="box">v-show</div><div v-if="flag" class="box">v-if</div></div><script>const app = new Vue({el: "#app",data: {flag: true}})</script>
</body>
</html>

此时进行渲染,可以看到两个box均有显示,且能在源码中找到:
在这里插入图片描述
利用Vue插件将flag的值改成false
在这里插入图片描述
保存之后,两个box都消失了,页面一片空白,但是从源码层面来看,v-showv-if就体现出了差别:
在这里插入图片描述
此时,v-show控制的容器依然能在源码中看到,只是其style属性被设置为"display: none;",因此不显示;而v-if则是直接从源码里面消失了。

因此,可以见得两者之间的区别,v-show只是控制了style属性,而v-if直接控制了整个容器存不存在。因此v-show更适合频繁出现-隐藏的容器,而v-if适合状态切换不那么频繁的场景,将需要隐藏的容器直接删去以节省资源。

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

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

相关文章

MATLAB运动学之蒙特卡罗法求积分与机器人工作域分析

蒙特卡罗法又叫做统计模拟法、随机抽样技术&#xff0c;是一种随机模拟方法以概率和统计理论方法为基础的一种计算方法&#xff0c;通俗来说是可以使用随机数来解决很多计算问题的一种方法&#xff0c;很直观简单&#xff0c;尤其对于一些求解积分无解的情况&#xff0c;非常好…

书-二分查找找某个数字p155

#include<stdio.h> int main(){int a[10]{1,4,5,6,7,8,23,34,90,14567};int mid;int low0;int high9;while(low<high){mid(lowhigh)/2;//数组分成两段&#xff0c;前一段low-mid&#xff0c;后一段mid-highif (a[mid]<23)//因为已经是排序好的了&#xff0c;所以如…

基于ssm志愿者招募网站源码和论文

网络的广泛应用给生活带来了十分的便利。所以把志愿者招募管理与现在网络相结合&#xff0c;利用java技术建设志愿者招募网站&#xff0c;实现志愿者招募的信息化。对于进一步提高志愿者招募管理发展&#xff0c;丰富志愿者招募管理经验能起到不少的促进作用。 志愿者招募网站…

虹科分享 | CanEasy多场景应用,让汽车总线测试更简单

CanEasy是一个基于Windows的总线工具&#xff0c;用于分析和测试CAN、CAN FD和LIN以及汽车以太网系统。通过高度自动化和简单的配置模拟总线流量&#xff0c;CanEasy可用于分析真实网络、模拟虚拟系统&#xff0c;以及在整个开发过程中进行剩余总线模拟&#xff0c;实现从测试到…

【力扣100】48.旋转图像

添加链接描述 class Solution:def rotate(self, matrix: List[List[int]]) -> None:n len(matrix)# Python 这里不能 matrix_new matrix 或 matrix_new matrix[:] 因为是引用拷贝matrix_new [[0] * n for _ in range(n)]for i in range(n):for j in range(n):matrix_ne…

“2024杭州国际安防产品展览会”加快推进浙江平安城市体系现代化

2024杭州国际安防产品展览会&#xff0c;将于2024年3月份在杭州国际博览中心隆重召开。作为全球安防产业的重要盛会&#xff0c;该展览会以其“专业化、市场化”为特点&#xff0c;聚焦每年核心主题&#xff0c;以专业化为核心&#xff0c;打造品牌项目&#xff0c;使之成为备受…

Ansys Lumerical | 采用一维光栅的出瞳扩展器的优化

附件下载 联系工作人员获取附件 本文演示了一种仿真方法&#xff0c;并举例说明了使用一维光栅的出瞳扩张器&#xff08;EPE&#xff09;系统的优化示例。 在此工作流程中&#xff0c;我们使用 Lumerical 构建光栅模型&#xff0c;并使用 RCWA 求解器模拟其响应。完整的EPE系…

一元四次方程解法,亲测ok

一元四次方程求解方法及程序 - 知乎 (zhihu.com) 自己写的不行&#xff0c;这个博主的完全ok&#xff0c;赞&#xff01;&#xff01;&#xff01;

关于上传的图片-File,Base64,Blob之间的转换

base64转file export function base64toFile (dataurl, filename) {let arr dataurl.split(,)let mime arr[0].match(/:(.*?);/)[1]let suffix mime.split(/)[1]let bstr atob(arr[1])let n bstr.lengthlet u8arr new Uint8Array(n)while (n--) {u8arr[n] bstr.charC…

arcgis api for js 中使用API的代理页面(跨越配置)

以下仅作为自己阅读官网api的对reques的理解做的备忘笔记。一知半解&#xff0c;仅供参考。 1、获取或者构建第三方代理 官网解释&#xff1a;代理在其自己的 Web 服务器上安装并运行&#xff0c;而不是在 Esri 服务器或安装了 ArcGIS Enterprise 的计算机上安装和运行&#…

(新手必看)自定义数据传输通信协议+STM32代码详解

前言 本篇博客主要学习和了解一些单片机协议的格式&#xff0c;在对传输大数据或者要求准确性的时候&#xff0c;都需要通过协议来发送接收&#xff0c;下面通过了解协议的基本构成和代码来分析和实现协议的发送和接收。本篇博客大部分是自己收集和整理&#xff0c;如有侵权请联…

机器学习-KL散度的直观理解+代码

KL散度 直观理解&#xff1a;KL散度是一种衡量两个分布之间匹配程度的方法。通常在概率和统计中&#xff0c;我们会用更简单的近似分布来代替观察到的数据或复杂的分布&#xff0c;KL散度帮我们衡量在选择近似值时损失了多少信息。 在信息论或概率论中&#xff0c;KL散度&#…

Java+Swing: 从数据库中查询数据并显示在表格中 整理11

分析&#xff1a;要想从数据库中查询数据并分页展示到表格中&#xff0c;我觉得应该按照这个思路&#xff1a;首先就是发起请求&#xff0c;此时需要向数据库中传递三个参数&#xff1a;当前页码&#xff08;pageNum&#xff09;、每一页的数量&#xff08;pageSize&#xff09…

好用的API接口大汇总,含免费次数

AI绘画-Stable Diffusion&#xff1a;通过AI 生成图片&#xff0c;包括图生文、文生图等。AI绘画-Mid Journey&#xff1a;使用 Midjourney 目前全球领先的图片大模型&#xff0c;其能根据输入文字提供极其优秀的AI绘画作品。运营商三要素 API&#xff1a;输入姓名、身份证号码…

Java八股文面试全套真题【含答案】- AJAX Axios篇

AJAX 是什么&#xff1f;它的全称是什么&#xff1f; 答案&#xff1a;AJAX 是 Asynchronous JavaScript and XML&#xff08;异步 JavaScript 和 XML&#xff09;的缩写。它是一种用于在后台与服务器进行数据交换的技术&#xff0c;实现异步加载数据而无需刷新整个页面。AJAX …

TypeScript 第十一节:命名空间

一、命名空间 TypeScript 中的命名空间&#xff08;Namespace&#xff09;用于将代码组织到逻辑分组中。在 TypeScript 中&#xff0c;命名空间是一个独立作用域中的代码集合。 1、示例 下面是一个简单的 TypeScript 命名空间示例&#xff1a; namespace MyNamespace {export…

Knowledge Graph知识图谱—8. Web Ontology Language (OWL)

8. Web Ontology Language (OWL) 在RDFs不可能实现&#xff1a; Property cardinalities, Functional properties, Class disjointness, we cannot produce contradictions, circumvent the Non Unique Naming Assumption, circumvent the Open World Assumption 8.1 OWL Tr…

window下make无法识别,同时缺少mingw32-make.exe文件

解决方法&#xff1a;window下make无法识别&#xff0c;同时缺少mingw32-make.exe文件_无法将make项识别为cmdlet-CSDN博客

网工排查网络故障,有这两款软件就够了

网络工程师的工作中&#xff0c;排查网络故障占很大一部分。领导让你查网络故障&#xff0c;批量Ping几十台电脑&#xff0c;结果你Ping了一个小时还没好。你总不能说批量Ping就是这么慢吧&#xff1f; 所以&#xff0c;在这里介绍两款网络工程师常用的排查网络故障工具。 Qu…

K8S学习指南(2)-docker的基本使用

文章目录 引言安装 DockerDocker 基本概念1. 镜像&#xff08;Images&#xff09;示例&#xff1a;拉取并运行一个 Nginx 镜像 2. 容器&#xff08;Containers&#xff09;示例&#xff1a;查看运行中的容器 3. 仓库&#xff08;Repository&#xff09;示例&#xff1a;推送镜像…