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

【vue】v-if 条件渲染

news 2026/3/30 0:49:22
  • 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

5大维度解析Mac Mouse Fix：从工具到体验的蜕变之旅

5大维度解析Mac Mouse Fix&#xff1a;从工具到体验的蜕变之旅 【免费下载链接】mac-mouse-fix Mac Mouse Fix - A simple way to make your mouse better. 项目地址: https://gitcode.com/GitHub_Trending/ma/mac-mouse-fix Mac Mouse Fix是一款让普通鼠标在macOS系统上…...

编程新知 2026/3/30 0:09:26

OpenClaw 网关重启全攻略：实用指令与故障排除指南

手把手教你一键部署OpenClaw&#xff0c;连接微信、QQ、飞书、钉钉等&#xff0c;1分钟全搞定&#xff01; 一、几种最省事的重启法子&#xff08;快速上手&#xff09; 手把手教你一键部署OpenClaw&#xff0c;连接微信、QQ、飞书、钉钉等&#xff0c;1分钟全搞定&#xff0…...

编程新知 2026/3/29 23:29:12

SpringBoot项目整合Redisson实战：从连接池报错到Redis集群健康检查的完整避坑指南

SpringBoot整合Redisson深度实践&#xff1a;连接池优化与集群健康监控全解析 Redis作为分布式系统的核心组件&#xff0c;其Java客户端Redisson的高阶用法一直是开发者关注的焦点。去年某电商平台大促期间&#xff0c;因Redis集群节点闪断导致的分布式锁失效事故&#xff0c;让…...

编程新知 2026/3/29 23:15:09

74HC595驱动8位数码管实战：从查找表到动态扫描的完整流程

74HC595驱动8位数码管实战&#xff1a;从查找表到动态扫描的完整流程 在嵌入式系统开发中&#xff0c;数码管显示是最基础也最考验硬件理解能力的环节之一。记得我第一次尝试用74HC595驱动数码管时&#xff0c;被那个"看似简单却暗藏玄机"的动态扫描原理折磨了整整三…...

编程新知 2026/3/29 22:26:48

如何参与Data-Science-For-Beginners社区贡献：完整开源项目参与指南

如何参与Data-Science-For-Beginners社区贡献&#xff1a;完整开源项目参与指南 【免费下载链接】Data-Science-For-Beginners 10 Weeks, 20 Lessons, Data Science for All! 项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners Data-Scienc…...

编程新知 2026/3/29 21:18:19

Git-RSCLIP模型在计算机网络教学中的应用

Git-RSCLIP模型在计算机网络教学中的应用 1. 引言 计算机网络课程的教学一直面临着抽象概念多、协议交互复杂、拓扑结构难以直观展示的挑战。传统的教学方式往往依赖于静态的图表和文字描述&#xff0c;学生很难真正理解数据包在网络中的流动过程、协议之间的交互关系&#x…...

编程新知 2026/3/29 20:56:12

拒绝手动排版！用Word域代码+样式库打造自动化技术文档（含GitHub模板）

拒绝手动排版&#xff01;用Word域代码样式库打造自动化技术文档&#xff08;含GitHub模板&#xff09; 技术文档工程师的日常往往被格式调整、编号校对这类重复劳动占据。我曾见过团队因为手动调整200页需求文档的标题格式&#xff0c;导致版本发布时间延误三天。其实&#x…...

编程新知 2026/3/29 19:29:39

Duix.Avatar：30分钟免费创建你的专属AI数字人，本地部署零成本

Duix.Avatar&#xff1a;30分钟免费创建你的专属AI数字人&#xff0c;本地部署零成本 【免费下载链接】Duix-Avatar 项目地址: https://gitcode.com/GitHub_Trending/he/Duix-Avatar 你是否曾梦想拥有一个能为你24小时工作的数字分身&#xff1f;是否因商业数字人服务动…...

编程新知 2026/3/29 18:59:33

Android SELinux权限调试实战：从avc denied到te文件修复

1. 初识SELinux权限问题&#xff1a;从avc denied开始 第一次看到avc denied日志时&#xff0c;我盯着那行红字足足愣了五分钟。当时正在调试一个需要访问系统目录的App&#xff0c;突然就蹦出来这么一段&#xff1a; avc: denied { write } for comm"com.test" name…...

编程新知 2026/3/29 18:51:31

开箱即用：ANIMATEDIFF PRO预置镜像部署，快速开启AI视频创作

开箱即用&#xff1a;ANIMATEDIFF PRO预置镜像部署&#xff0c;快速开启AI视频创作 1. 为什么选择ANIMATEDIFF PRO镜像 如果你正在寻找一个能快速生成电影级AI视频的解决方案&#xff0c;ANIMATEDIFF PRO预置镜像可能是目前最省心的选择。这个基于AnimateDiff架构和Realistic…...

编程新知 2026/3/29 17:27:06