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

【vue】v-if 条件渲染

news 2025/12/21 13:32:00
  • 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

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2025/7/5 11:03:11

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/12/16 20:52:05

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2025/12/18 14:07:45

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

编程新知 2025/12/21 3:29:57