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

【vue】v-if 条件渲染

news 2026/2/4 17:04:41
  • v-if
    • 不适用于频繁切换显示模式的场景

在这里插入图片描述
修改web.user，可看到条件渲染的效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><h2>{{web.show}}</h2><hr><p v-show="web.show">这是一段文字，可通过按钮隐藏</p><p v-if="web.show">www.tao355667.com</p><button @click="toggle">切换显示状态</button><p v-if="web.user<1000">新网站</p><p v-else-if="web.user>=1000 && web.user<10000">良好网站</p><p v-else-if="web.user>=10000 && web.user<100000">优秀网站</p><p v-else>非常优秀网站</p></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({show: true,user:1000})const toggle = () => {web.show = !web.show;}return {web,toggle}}}).mount("#app")</script>
</body></html>

参考

https://www.bilibili.com/video/BV1nV411Q7RX

相关文章：

【vue】v-if 条件渲染

v-if 不适用于频繁切换显示模式的场景 修改web.user&#xff0c;可看到条件渲染的效果 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initi…...

编程日记 2024/4/12 14:54:58

Day37:LeedCode 738.单调递增的数字 968.监控二叉树 蓝桥杯 翻转

738. 单调递增的数字 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的最大数字&#xff0c;且数字呈 单调递增 。 示例 1: 输入: n 10 输出: 9 思路: 假设这个数是98,…...

编程日记 2024/4/12 14:49:51

详解Qt元对象系统

Qt库作为一款流行的跨平台C应用程序开发框架&#xff0c;其中的元对象系统是其核心特性之一。Qt元对象系统不仅提供了诸如信号槽&#xff08;Signals & Slots&#xff09;、属性系统&#xff08;Property System&#xff09;等功能&#xff0c;还实现了对C对象的运行时类型…...

编程日记 2024/4/12 14:48:50

无法用raven-js，如何直接使用TraceKit标准化错误字符串（一次有趣的探索）

引子&#xff1a;网上三年前&#xff08;2020&#xff09;的文章介绍了一个raven-js 简单说就是把堆栈信息格式化兼容各浏览器&#xff0c;便于查看错误来源。 **but&#xff1a;**到处找了一下raven-js&#xff0c;已经没有官方出处了&#xff0c;只在Sentry的源码仓库里发现…...

编程日记 2024/4/12 14:47:49

Docker学习笔记（二）：在Linux中部署Docker（Centos7下安装docker、环境配置，以及镜像简单使用）

一、前言 记录时间 [2024-4-6] 前置文章&#xff1a;Docker学习笔记&#xff08;一&#xff09;&#xff1a;入门篇&#xff0c;Docker概述、基本组成等&#xff0c;对Docker有一个初步的认识 在上文中&#xff0c;笔者进行了Docker概述&#xff0c;介绍其历史、优势、作用&am…...

编程日记 2024/4/12 14:45:33

uniapp 检查更新

概览 在uniapp中检查并更新应用&#xff0c;可以使用uni-app自带的更新机制。以下是一个简单的示例代码&#xff0c;用于在应用启动时检查更新&#xff1a; // 在App.vue或者其他合适的地方调用 onLaunch: function() {// 当uni-app初始化完成时执行// 判断平台const platfor…...

编程日记 2024/4/12 14:44:31

（Java）数据结构——正则表达式

前言 本博客是博主用于复习数据结构以及算法的博客&#xff0c;如果疏忽出现错误&#xff0c;还望各位指正。 正则表达式概念 正则表达式&#xff0c;又称规则表达式&#xff08;Regular Expression&#xff09;&#xff0c;是一种文本模式&#xff0c;包括普通字符&#xf…...

编程日记 2024/4/12 14:42:28

第6章 6.3.1 正则表达式的语法（MATLAB入门课程）

讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 正则表达式可以由一般的字符、转义字符、元字符、限定符等元素组…...

编程日记 2024/4/12 14:35:16

RX8130CE为用户提供带复位延迟和主备电管理的解决方案

实时时钟作为设备的精确时钟来源&#xff0c;其作用如同人的心脏&#xff0c;为设备提供准确稳定的心跳.而便携式设备由于应用场景多变&#xff0c;所以对内部元器件要求也相对较高&#xff0c;这就对作为核心器件的实时时钟模块提出不少挑战。EPSON实时钟模块产品线拥有丰富的…...

编程日记 2024/4/12 14:34:14

JS文件导出变量

如果 config.js 文件中有多个变量要导出&#xff0c;你可以按照以下步骤进行&#xff1a; 1. 在 config.js 文件中定义多个变量&#xff0c;并使用 export 导出它们。 // config.js const baseUrl "http://localhost:8081"; const apiKey "your_api_key&quo…...

编程日记 2024/4/12 14:33:11

已知私钥和密文,如何用python进行RSA解密

要使用Python进行RSA解密，你可以使用pycryptodome库。下面是一个简单的示例，展示了如何使用已知的私钥和密文进行RSA解密： 首先，确保你已经安装了pycryptodome库。如果没有安装，你可以通过运行pip install pycryptodome来安装它。 然后，你可以使用以下代码进行RSA解密：…...

编程日记 2024/4/12 14:29:07

vue2-vue3面试

v-text/v-html/v-once/v-show/v-if/v-for/v-bind/v-on beforeCreate() 已有DOM节点&#xff1a;可以data选项&#xff1a;不可以虚拟DOM节点&#xff1a;不可以 created():掌握 已有DOM节点&#xff1a;可以data选项&#xff1a;可以虚拟DOM节点&#xff1a;不可以 beforeMount…...

编程日记 2024/4/12 14:28:06

jmeter生成随机数的详细步骤及使用方式

Apache JMeter 是一个用于测试性能的开源工具&#xff0c;它可以模拟多种类型的负载并测量应用程序的性能。在 JMeter 中生成随机数可以通过使用预定义的函数来实现。以下是生成随机数的详细步骤及使用方式&#xff1a; 安装 JMeter&#xff1a; 首先&#xff0c;你需要在你的计…...

编程日记 2024/4/12 14:26:03

速盾：为什么会出现高防cdn?它适合哪些行业?

随着互联网的不断发展和普及&#xff0c;网络安全问题也变得日益突出。由于互联网的特性&#xff0c;许多企业和组织的在线业务往往面临来自网络攻击的威胁&#xff0c;如DDoS攻击、恶意爬虫等。为了保护在线业务的正常运行和用户数据的安全&#xff0c;高防CDN应运而生。 高防…...

编程日记 2024/4/12 14:22:58

GB∕T 25058-2019 信息安全技术 网络安全等级保护实施指南

GB∕T 25058-2019 信息安全技术 网络安全等级保护实施指南...

编程日记 2024/4/12 14:20:53

使用Nodejs + express连接数据库mongoose

文章目录 先创建一个js文档安装 MongoDB 驱动程序&#xff1a;引入 MongoDB 模块&#xff1a;设置数据库连接&#xff1a;新建一个表试试执行数据库操作&#xff1a;关闭数据库连接&#xff1a; 前面需要准备的内容可看前面的文章&#xff1a; Express框架搭建项目 node.js 简单…...

编程日记 2024/4/12 14:19:52

朗致集团面试-Java架构师

总结 三轮面试&#xff0c;第一轮是逻辑测试性格测试&#xff0c;第二轮是技术面试&#xff08;面试官-刘老师&#xff09;&#xff0c;第三轮是CTO面试&#xff08;面试官-屠老师&#xff09;。如果第三轮面试通过&#xff0c;考官会问你薪资意向&#xff0c;如果满意的话HR就…...

编程日记 2024/4/12 14:16:47

Ubuntu 23.10 搜狗拼音输入法闪屏解决

问题与解决 Ubuntu 23.10下安装搜狗拼音输入法并且使用搜狗输入法时&#xff0c;会闪屏。站内有人说可以换使用Xorg作为桌面服务&#xff0c;然后使用基于X11的桌面&#xff0c;其实可以不用那么麻烦&#xff0c;只需要设置QT的环境变量QT_QPA_PLATFORMxcb&#xff0c;然后重新…...

编程日记 2024/4/12 14:12:41

备战蓝桥杯---刷杂题2

显然我们直接看前一半&#xff0c;然后我们按照斜行看&#xff0c;我们发现斜行是递增的&#xff0c;而同一行从左向右也是递增的&#xff0c;因此我们可以直接二分&#xff0c;同时我们发现对称轴的数为Ck,2k. 我们从16斜行枚举即可 #include<bits/stdc.h> using name…...

编程日记 2024/4/12 14:10:39

.[[backup@waifu.club]].svh勒索病毒数据怎么处理|数据解密恢复

尊敬的读者&#xff1a; 近年来&#xff0c;随着信息技术的迅猛发展&#xff0c;网络安全问题日益凸显&#xff0c;其中勒索病毒成为了一大威胁。.[[backupwaifu.club]].svh、.[[MyFilewaifu.club]].svh勒索病毒就是其中之一&#xff0c;它以其独特的传播方式和恶劣的加密手段…...

编程日记 2024/4/12 14:09:34

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2026/2/1 11:44:45

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2026/1/31 7:34:26

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

编程新知 2025/11/26 18:23:29

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

编程新知 2026/1/20 11:55:46