当前位置： 首页 > news >正文

Vue基础(11)_条件渲染

news 来源：原创 2025/7/28 2:11:28

原生css想让显示的元素隐藏，方式有以下几点：

            display: none;

            opacity: 0;

            visibility: hidden;

那么vue中是怎样实现元素显示/隐藏的呢？

条件渲染

v-show

写法：v-show="表达式"

判断：表达式转换为布尔值(true:显示；flase：隐藏)
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使样式隐藏掉(display:none)。

注意：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到。

举例：

        <h2>当前n值是：{{n}}</h2><button @click="n++">v-show实现:点我n+1</button><br><div><ol><li v-show="n==1">Angular</li><li v-show="n==2">React</li><li v-show="n==3">Vue</li><li v-show="n==4">哈哈</li></ol></div>

v-if

写法：
(1).v-if="表达式"
(2).v-else-if="表达式"
(3).v-else="表达式"

判断：表达式转换为布尔值(true:显示；flase：隐藏)
适用于：切换频率较低的场景。
特点：不展示的DOM元素会直接被移除(dom节点被增删)。

搭配：和template标签配合使用，代码结构不会影响，从而避免css选择器设置的样式失效。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被"打断"。

举例：

        <button @click="n++">v-if实现:点我n+1</button><br><ol><li v-if="n==1">Angular</li><li v-if="n==2">React</li><li v-if="n==3">Vue</li><li v-if="n==4">哈哈</li></ol>

举例：

        <h2>当前n值是：{{n}}</h2><button @click="n++">v-if...v-elseif...v-else实现:点我n+1</button><br><ol><li v-if="n==1">Angular</li><li v-else-if="n==2">React</li><li v-else-if="n==3">Vue</li><li v-else="n==4">哈哈</li></ol>

v-if可以和:v-else-if、v-else一起使用，但不允许被打断，例如：以下代码就会报错(12345以下系统无法判断)。

        <h2>当前n值是：{{n}}</h2><button @click="n++">v-if...v-elseif...v-else实现:点我n+1</button><br><ol><li v-if="n==1">Angular</li><li v-else-if="n==2">React</li><span>12345</span><li v-else-if="n==3">Vue</li><li v-else="n==4">哈哈</li></ol>

v-if和template配合使用:

        <!-- h3字体已经设置为：橙色 h3{color: chocolate;}--><h2>当前n值是：{{n}}</h2><button @click="n++">点我n+1</button><br><template v-if="n==1"><h3>张三</h3><h3>李四</h3><h3>王五</h3></template>

注意：template 标签在页面加载时不会呈现任何内容，相当于自带 display: none; 属性。在 Vue 中，template 标签支持 v-if、v-else-if、v-else、v-for 等指令，但不支持 v-show。

相关文章：

Vue基础(11)_条件渲染

原生css想让显示的元素隐藏&#xff0c;方式有以下几点&#xff1a; display: none; opacity: 0; visibility: hidden; 那么vue中是怎样实现元素显示/隐藏的呢&#xff1f; 条件渲染 v-show 写法&#xff1a;v-show"表达式" 判断&#xff1a;表达式转换为布尔值(tr…...

编程日记 2025/7/28 2:11:28

湖北理元理律师事务所：债务优化服务的四维创新实践

在债务问题普遍影响家庭经济稳定的当下&#xff0c;专业法律服务机构的价值不仅在于提供解决方案&#xff0c;更需构建可持续的服务生态。湖北理元理律师事务所通过“法律心理技术教育”四维服务体系&#xff0c;探索出一条兼顾债务化解与生活质量保障的创新路径。 服务模式创…...

编程日记 2025/7/28 2:03:55

ubuntu工控机固定设备usb串口号

ubuntu工控机固定设备usb串口号 1、多个USB设备的ID相同 ubuntu系统中的串口使用权限并没有对所有的用户进行开放&#xff0c;所以在使用代码对串口进行操作时&#xff0c;需要打开用户对串口的使用权限&#xff0c;否则在代码中会出现“串口无法打开的报错”&#xff0c;只有…...

编程日记 2025/7/28 2:08:00

MongoDB的安装及简单使用

MongoDB 是一个开源的文档型 NoSQL 数据库​​&#xff0c;由 MongoDB Inc. 开发&#xff0c;专为灵活性和可扩展性设计。 特点&#xff1a; ​​1.文档模型​​&#xff1a;数据以 BSON&#xff08;二进制 JSON&#xff09;格式存储&#xff0c;支持嵌套结构。 ​​2.动态 S…...

编程日记 2025/7/25 20:13:57

卷积神经网络进阶：转置卷积与棋盘效应详解

【内容摘要】 本文深入解析卷积神经网络中的转置卷积&#xff08;反卷积&#xff09;技术&#xff0c;重点阐述标准卷积与转置卷积的计算过程、转置卷积的上采样作用&#xff0c;以及其常见问题——棋盘效应的产生原因与解决方法&#xff0c;为图像分割、超分辨率等任务提供理论…...

编程日记 2025/7/27 21:28:45

Linux进程信号（三）之信号产生2

文章目录 4. 由软件条件产生信号5. 硬件异常产生信号模拟一下除0错误和野指针异常除0错误野指针错误 总结思考一下 4. 由软件条件产生信号 SIGPIPE是一种由软件条件产生的信号,在“管道”中已经介绍过了。 软件条件不就绪&#xff0c;很明显这个软件条件没有直接报错&#xff…...

编程日记 2025/7/28 2:10:01

【AWS入门】Amazon SageMaker简介

【AWS入门】Amazon SageMaker简介 [AWS Essentials] Brief Introduction to Amazon SageMaker By JacksonML 机器学习(Machine Learning&#xff0c;简称ML) 是当代流行的计算机科学分支技术。通常&#xff0c;人们在本地部署搭建环境&#xff0c;以满足机器学习的要求。 AWS…...

编程日记 2025/7/28 2:02:58

MySQL--day2--基本的select语句

&#xff08;以下内容全部来自上述课程&#xff09; SQL概述 结构化查询语句 1. SQL分类 DDL&#xff1a;数据定义&#xff08;definition&#xff09;语言&#xff1a;create、drop、alter… DML&#xff1a;数据操作&#xff08;manipulation&#xff09;语言&#xff…...

编程日记 2025/7/27 9:27:08

程序代码篇---python获取http界面上按钮或者数据输入

文章目录 前言 前言 本文简单接受了python获取http界面上按钮或者数据输入...

编程日记 2025/7/28 1:52:34

网络安全利器：蜜罐技术详解

蜜罐是网络安全领域中一种主动防御和情报收集的重要工具。本文将深入探讨蜜罐技术的原理、类型、应用场景以及部署注意事项。 1. 什么是蜜罐？ 蜜罐（Honeypot）是一种安全资源，其价值在于被探测、攻击或未经授权使用。简单来说，蜜罐就是一个诱饵系统，用来吸引黑客的注意力…...

编程日记 2025/7/28 1:59:13

回溯实战篇3

文章目录 前言排列全排列全排列II 棋盘问题N皇后解数独 其他递增子序列重新安排行程 前言 今天继续带大家进行回溯的实战篇3&#xff0c;去学习如何用回溯的方法去解决排列和棋盘以及其他用回溯方法解决的问题&#xff0c;最重要的就是学会回溯三部曲的构建&#xff0c;一文带…...

编程日记 2025/7/28 1:49:56

Spark 基础自定义分区器

&#xff08;一&#xff09;什么是分区 【复习提问&#xff1a;RDD的定义是什么&#xff1f;】 在 Spark 里&#xff0c;弹性分布式数据集&#xff08;RDD&#xff09;是核心的数据抽象&#xff0c;它是不可变的、可分区的、里面的元素并行计算的集合。 在 Spark 中&#xf…...

编程日记 2025/7/28 1:25:50

【提高+/省选−】洛谷P1495 —— 【模板】中国剩余定理（CRT）/ 曹冲养猪

见&#xff1a;P1495 【模板】中国剩余定理&#xff08;CRT&#xff09;/ 曹冲养猪 - 洛谷 题目描述 自从曹冲搞定了大象以后&#xff0c;曹操就开始捉摸让儿子干些事业&#xff0c;于是派他到中原养猪场养猪&#xff0c;可是曹冲满不高兴&#xff0c;于是在工作中马马虎虎&a…...

编程日记 2025/7/27 20:50:41

系统架构设计师考前冲刺笔记-第1章-系统工程与信息系统基础

文章目录 第1章 系统工程与信息系统基础大纲13 DSS5678 BSP910 SCM11 OLAP12 OLAP14 BRP15 集成16 企业门户19 边缘计算 第1章 系统工程与信息系统基础 大纲 1 3 DSS DSS 决策支持系统 Decision Support System 5 6 7 8 BSP 9 10 SCM 注意&#xff1a;生产计划 11 OLAP O…...

编程日记 2025/7/28 2:02:59

Vue环境下数据导出Excel的全面指南

文章目录 1. 前言2. 原生JavaScript实现方案2.1 使用Blob对象和URL.createObjectURL2.2 使用Base64编码实现 3. 常用第三方库方案3.1 使用SheetJS (xlsx)3.2 使用ExcelJS3.3 使用vue-json-excel 4. 服务器端导出方案4.1 前端请求服务器生成Excel4.2 使用Web Worker处理大数据导…...

编程日记 2025/7/28 1:51:50

Linux下 使用 SSH 完成 Git 绑定 GitHub

文章目录 1、检查 SSH2、生成 SSH key3、添加 SSH key4、验证绑定是否成功 1、检查 SSH Git Bash 中输入ssh命令&#xff0c;查看本机是否安装 SSH&#xff1a; 2、生成 SSH key &#xff08;1&#xff09;输入 ssh-keygen -t rsa 命令&#xff0c;表示我们指定 RSA 算法生…...

编程日记 2025/7/22 5:07:07

Jsoup库和Apache HttpClient库有什么区别？

Jsoup 和 Apache HttpClient 是两个功能不同的库&#xff0c;它们在 Java 开发中被广泛使用&#xff0c;但用途和功能有明显的区别&#xff1a; Jsoup 用途&#xff1a;Jsoup 是一个用于解析 HTML 文档的库。它提供了非常方便的方法来抓取和解析网页内容&#xff0c;提取和操作…...

编程日记 2025/7/24 15:48:03

安全漏洞频发，如何加强防护措施？

当系统安全漏洞频发时&#xff0c;应从代码安全审查、自动化漏洞扫描、权限控制与访问管理、员工安全意识培训等四个关键维度加强防护。其中&#xff0c;代码安全审查是防止漏洞渗透的第一道防线。企业应将代码安全审查纳入CI/CD流程&#xff0c;实施静态代码分析和依赖包检查机…...

编程日记 2025/7/15 12:50:43

Text models —— BERT，RoBERTa， BERTweet，LLama

BERT 什么是BERT&#xff1f; BERT&#xff0c;全称Bidirectional Encoder Representations from Transformers&#xff0c;BERT是基于Transformer的Encoder&#xff08;编码器&#xff09;结构得来的&#xff0c;因此核心与Transformer一致&#xff0c;都是注意力机制。这种…...

编程日记 2025/7/23 1:40:08

CodeBuddy初探

回顾Trae 上一篇博客Trae IDE和VSCode Trae插件初探-CSDN博客&#xff0c;我们进行了TraeIDE和Trae插件初探&#xff0c;给了Trae这样一个任务&#xff1a; 生成一个to do list清单web页面&#xff0c;采用vue实现&#xff0c;可以在页面上进行todolist进行增删改查。 Trae的…...

编程日记 2025/7/27 18:50:30

spark数据处理练习题详解【上】

1. (单选题) scala中属于序列的可变的集合&#xff0c;可以添加&#xff0c;删除元素的是&#xff08;&#xff09; A.Array B.List C.Tuple D.ListBuffer 答案及解析&#xff1a;D 在Scala中&#xff0c;属于序列的可变集合&#xff0c;可以添加和删除元素的是&#xff…...

编程日记 2025/7/23 17:36:10

sparkSQL读入csv文件写入mysql（2）

&#xff08;二&#xff09;创建数据库和表 接下来&#xff0c;我们去创建一个新的数据库&#xff0c;数据表&#xff0c;并插入一条数据。 -- 创建数据库 CREATE DATABASE spark; -- 使用数据库 USE spark;-- 创建表 create table person(id int, name char(20), age int);-- …...

编程日记 2025/7/23 16:26:31

产品周围的几面墙

不能把排序&#xff0c;当单选题做。 2025年的杭州咖啡馆&#xff0c;味道最浓的不是咖啡&#xff0c;是聊各种项目和创业的卷味。 在过去几年&#xff0c;聊项目的也不少&#xff0c;那时候带着更加浓烈的自信和松弛感&#xff0c;不过今年略带几分忐忑和试探的口吻。 看到网…...

编程日记 2025/7/22 10:36:31

【锂电池剩余寿命预测】LSTM长短期记忆神经网络锂电池剩余寿命预测（Pytorch完整源码和数据）

目录 效果一览程序获取程序内容代码分享效果一览 程序获取 获取方式一：文章顶部资源处直接下载：...

编程日记 2025/7/15 23:08:51

螺旋矩阵--LeetCode

题目 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,3,6,9,8,7,4,5]示例 2&#xff1a; 输入&#xff1a;matrix [[…...

编程日记 2025/7/24 21:34:25

湖北理元理律师事务所：债务管理的社会价值探索

债务问题从来不是孤立的经济事件&#xff0c;其背后牵涉家庭稳定、社会信用体系乃至区域经济发展。湖北理元理律师事务所通过五年服务数据发现&#xff1a;科学债务规划可使单个家庭挽回约23%的可支配收入&#xff0c;间接降低离婚率、心理健康问题发生率等社会成本。 债务优化…...

编程日记 2025/7/22 14:53:53

知识图谱（KG）与大语言模型（LLM）

知识图谱&#xff08;KG&#xff09;以其结构化的知识表示和推理能力&#xff0c;为大语言模型&#xff08;LLM&#xff09;的“幻觉”、知识更新滞后和可解释性不足等问题提供了有力的解决方案。反过来&#xff0c;LLM的强大文本理解和生成能力也为KG的构建、补全、查询和应用…...

编程日记 2025/7/23 16:14:25

LLM大语言模型系列1-token

一&#xff0c;什么是token 1&#xff0c;什么是token&#xff1a; 参考&#xff1a;https://en.wikipedia.org/wiki/Token https://en.wikipedia.org/wiki/Lexical_analysis#Token 我们有很多描述token的解释&#xff0c;建议是汇总在一起进行综合理解&#xff1a; 1️⃣To…...

编程日记 2025/7/26 3:31:28

数据清洗-案例

四&#xff09;实现代码 在之前的项目的基础之上&#xff0c;重写去写一个包&#xff0c;并创建两个类&#xff1a;WebLogMapper和WebLogDriver类。 &#xff08;1&#xff09;编写WebLogMapper类 package com.root.mapreduce.weblog; import java.io.IOException; import…...

编程日记 2025/7/25 14:41:27

项目的部署发布和访问的流程

首先打包项目&#xff1a; npm run build 打包后的文件会生成在dist文件夹中&#xff0c;将dist文件夹需要放到服务器里面&#xff0c;意味着服务有dist静态资源&#xff08;index.html&#xff0c;css/&#xff0c;js/&#xff0c;img/&#xff09; 用户在浏览器输入域名&am…...

编程日记 2025/7/25 20:37:54

人工智能、机器学习、深度学习定义与联系

人工智能、机器学习、深度学习定义与联系目录 一、人工智能&#xff08;Artificial Intelligence, AI&#xff09;1、定义2、特征&#xff1a;3、关键阶段的概述&#xff1a;1. 萌芽期&#xff08;1940s–1950s&#xff09;&#xff1a;理论奠基2. 形成期&#xff08;1950s–19…...

编程日记 2025/7/25 12:20:12

Gartner《如何将生成式人工智能（GenAI）集成到应用架构》学习心得

针对软件架构师、技术专业人士如何更好的把 GenAI 如何融入解决方案，提升用户体验、生产力并带来差异化成果的趋势，Gartner发布了《Integrating GenAI Into Your Application Architecture》研究报告。 报告首先介绍了 GenAI 的发展背景，指出其已成为主流趋势，大型语言模型…...

编程日记 2025/7/26 18:55:27

vscode中Debug c++

在vscode中Debug ros c程序 1 在Debug模式下编译 如果用命令行catkin_make&#xff0c;在输入catkin_make时加上一个参数&#xff1a; catkin_make -DCMAKE_BUILD_TYPEDebug 或者直接修改CMakelist.txt&#xff0c;添加以下代码&#xff1a; SET(CMAKE_BUILD_TYPE "D…...

编程日记 2025/7/11 1:12:05

c++从入门到精通（六）--特殊工具与技术-完结篇

特殊工具与技术-完结篇 控制内存分配 重载new和delete&#xff1a; ​ 如果应用程序希望控制内存分配的过程&#xff0c;则它们需要定义自己的operator new函数和operator delete函数。当自定义了全局的operator new函数和operator delete函数后&#xff0c;我们就担负起了控…...

编程日记 2025/7/22 18:54:20

原型链的详细解释及使用场景

一、原型链的概念 原型链是JavaScript实现继承和属性共享的核心机制。每个对象都有一个内部属性[[Prototype]]&#xff08;可通过proto访问&#xff09;&#xff0c;指向其原型对象。当访问对象的属性时&#xff0c;若对象自身不存在该属性&#xff0c;则会沿着原型链向上查找…...

编程日记 2025/7/27 4:31:51

OpenCL C C++核心对象与属性对比

基础对象对应关系 OpenCL C 对象OpenCL C 对应类型创建函数示例cl::Platformcl_platform_idclGetPlatformIDs(1, &platform, NULL)cl::Devicecl_device_idclGetDeviceIDs(platform, CL_DEVICE_TYPE_GPU, 1, &device, NULL)cl::Contextcl_contextclCreateContext(NULL,…...

编程日记 2025/7/18 17:27:19

Azure 机器学习初学者指南

Azure 机器学习初学者指南 在我们的初学者指南中探索Azure机器学习&#xff0c;了解如何设置、部署模型以及在Azure生态系统中使用AutoML & ML Studio。Azure 机器学习 &#xff08;Azure ML&#xff09; 是一项全面的云服务&#xff0c;专为机器学习项目生命周期而设计&am…...

编程日记 2025/7/26 5:30:55

一文读懂----Docker 常用命令

Docker 是一个强大的容器化平台&#xff0c;广泛用于开发、测试和生产环境。通过 Docker 命令行工具&#xff08;CLI&#xff09;&#xff0c;我们可以轻松管理容器、镜像、网络和卷等资源。本文将详细介绍 Docker 的常用命令&#xff0c;带你熟练掌握 Docker 的核心操作命令。…...

编程日记 2025/7/23 6:30:56

React 19 中的useRef得到了进一步加强。

文章目录 前言一 useRef 的核心原理1.1 为什么需要 useRef&#xff1f;1.2 基本语法 二、React 19 中 useRef 的常见用法2.1 访问 DOM 元素2.2 保存跨渲染的数据 三、React 19 中的改进ref 作为一个属性案例演示(触发子组件焦点事件) 注意 总结 前言 在 React 的世界里&#x…...

编程日记 2025/7/26 23:13:27

报错System.BadImageFormatException:“试图加载格式不正确的程序。 (异常来自 HRESULT:0x8007000B)”

this.hWindowControl_Player new HalconDotNet.HWindowControl();报错System.BadImageFormatException:“试图加载格式不正确的程序。 (异常来自 HRESULT:0x8007000B)” System.BadImageFormatException 错误通常是由于平台架构不匹配导致的。它意味着你正在尝试在一个平台上加…...

编程日记 2025/7/26 18:41:58

【图像处理基石】OpenCV中都有哪些图像增强的工具？

OpenCV 图像增强工具系统性介绍 OpenCV 提供了丰富的图像增强工具&#xff0c;主要分为以下几类&#xff1a; 亮度与对比度调整 线性变换&#xff08;亮度/对比度调整&#xff09;直方图均衡化自适应直方图均衡化&#xff08;CLAHE&#xff09; 滤波与平滑 高斯滤波中值滤波双…...

编程日记 2025/7/25 5:21:28

Nordic 的RTC（Real-time counter）的介绍

目录 概述 1 RTC&#xff08;Real-time counter&#xff09;介绍 1.1 框架结构 1.2 时钟源 1.3 分辨率与溢出和precaler 2 寄存器功能介绍 2.1 计数寄存器 2.2 事件控制功能 2.3 比较功能 2.4 读取COUNTER寄存器 概述 本文主要介绍Nordic 的RTC&#xff08;Real-time…...

编程日记 2025/7/27 15:20:05

【数据结构】2-2-2 顺序表的插入删除查找

数据结构知识点合集 知识点 顺序表的插入 ListInsert(&L,i,e)&#xff1a;插入操作。在表L中的第i个位置上插入指定元素e。 /*在顺序表L的第i个位置插入元素e*/ bool ListInsert(SqList &L,int i,int e) {/*判断i的范围是否有效*/if(i<0||i>L.length)return fals…...

编程日记 2025/7/27 6:47:55

【免杀】C2免杀技术（五）动态API

一、什么是动态API 在C2免杀领域中&#xff0c;“动态API” 主要指的是绕过静态检测的一种技术手段&#xff0c;其本质是运行时动态解析和调用Windows API函数&#xff0c;而不是在程序编译阶段就明确引用这些API。这种方式可以有效躲避静态分析工具和杀软的签名识别。 为什么…...

编程日记 2025/7/27 11:00:19

77.数据大小端赋值的差异与联系

上述赋值a定义为大端模式 a[7] a[6] a[5] a[4] a[3] a[2] a[1] a[0] 上述赋值b定义为小端模式 a[0] a[1] a[2] a[3] a[4] a[5] a[6] a[7] 因为5的二进制数…...

编程日记 2025/7/19 20:51:07

GO语言语法---switch语句

文章目录 基本语法1. 特点1.1 不需要break1.2 表达式可以是任何类型1.3 省略比较表达式1.4 多值匹配1.5 类型switch1.6 case穿透1.7 switch后直接声明变量1.7.1 基本语法1.7.2 带比较表达式1.7.3 不带比较表达式1.7.4 结合类型判断 1.8 switch后的表达式必须与case语句中的表达…...

编程日记 2025/7/25 9:30:38

PH热榜 | 2025-05-16

1. Tolt 标语&#xff1a;专为SaaS初创公司打造的一体化联盟营销软件 介绍&#xff1a;Tolt帮助SaaS初创公司启动和发展联盟计划。它提供自动化的支付、欺诈保护、与多种平台的无缝集成&#xff08;包括Stripe、Paddle和Chargebee&#xff09;&#xff0c;还有一个品牌化的联…...

编程日记 2025/7/26 9:53:38

Java正则表达式：从基础到高级应用全解析

Java正则表达式应用与知识点详解 一、正则表达式基础概念 正则表达式(Regular Expression)是通过特定语法规则描述字符串模式的工具&#xff0c;常用于&#xff1a; 数据格式验证文本搜索与替换字符串分割模式匹配提取 Java通过java.util.regex包提供支持&#xff0c;核心类…...

编程日记 2025/7/25 4:20:53

iOS 初识RunLoop

iOS 初识RunLoop 文章目录 iOS 初识RunLoopRunLoop的概念RunLoop的功能RunLoop和线程的关系RunLoop的结构ModeObserverTimer 和 source小结 RunLoop的核心RunLoop的流程RunLoop的应用AutoreleasePool响应触控事件刷新界面常驻线程网络请求NSTimer 和 CADisplayLinkNSTimerGCDTi…...

编程日记 2025/7/16 1:56:55

备忘录模式

1.意图 备忘录模式是一种行为型设计模式&#xff0c;允许在不破坏封装的特性前提&#xff0c;获取并保存一个对象的内部状态&#xff0c;后续需要时恢复该状态。核心是将对象的状态存储在一个独立的备忘录对象中&#xff0c;并在需要时恢复。 2.模式类型 行为型对象设计模式 …...

编程日记 2025/7/27 19:54:58