【vue】v-if 条件渲染

  • 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

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

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

相关文章

.NET MAUI使用Visual Studio Android Emulator(安卓模拟器)运行

Android Emulator&#xff08;安卓模拟器&#xff09;运行&#xff1a; 安卓模拟器一直卡在不动&#xff1a; 在某些情况下&#xff0c;在“打开或关闭 Windows 功能”对话框中启用 Hyper-V 和 Windows 虚拟机监控程序平台后可能无法正确启用Hyper-V。 我就是开启Hyper-V才把安…

测试领域革新:ChatGPT助你轻松编写测试方案!

简介 测试方案是指描述需要被测产品的特性、测试的方法、测试环境的规划、测试工具的设计和选择、测试用例的设计方法、测试代码的设计方案。 我们常常需要根据产品的特性、测试策略等几个方向输出对应的测试方案。在写测试方案的过程中&#xff0c;常常会碰到没有头绪的问题…

卫星导航双频低噪声放大器芯片—ATR2701

ATR2701 是一款专门针对卫星导航 L1 和 L2 双频段应用而设计的高增益、低噪声系数射频放大器。 ATR2701 芯片采用采用 2 级放大器的结构设计&#xff0c;具有 28 dB 高增益和 0.85dB 的低噪声系数。芯片支持 3.3V 至 5V 宽电源供电。芯片采用 2.1 mm X 2.3 mm 1 mm 的 SOT 封…

Kubernetes学习笔记11

k8s集群核心概念&#xff1a;pod&#xff1a; 在K8s集群中是不能直接运行容器的&#xff0c;K8s的最小调度单元是Pod&#xff0c;我们要使用Pod来运行应用程序。 学习目标&#xff1a; 了解pod概念&#xff1a; 了解查看pod方法 了解创建pod方法 了解pod访问方法 了解删除…

Promise简单概述

一. Promise是什么&#xff1f; 理解 1.抽象表达&#xff1a; Promise是一门新的技术(ES6规范) Promise是JS中进行异步编程的新解决方案(旧方案是单纯使用回调函数) 异步编程&#xff1a;包括fs文件操作&#xff0c;数据库操作(Mysql)&#xff0c;AJAX&#xff0c;定时器 2.具…

使用Nodejs + express连接数据库mongoose

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

计算机网络—RTT-RTTS-RTTD和RTO的解释及例题讲解

RTT&#xff08;往返时延&#xff09;、RTTS&#xff08;平滑往返时间&#xff09;、RTTD&#xff08;往返偏移时间&#xff09;和RTO&#xff08;超时重传&#xff09;是网络通信中常用的几个术语&#xff0c;尤其在TCP协议中非常重要。 下面是一个表格&#xff0c;用于解释这…

jodconverter+openOffice word文档pdf转换

刚好遇到了&#xff0c;花了几个小时时间研究了下。 第一种:POIiText PDFBox&#xff0c;试了下&#xff0c;效果不太行&#xff0c;比较差&#xff0c;而且有些中文以及格式不好处理 第二种:jacob 不支持linux&#xff0c;不考虑 第三种:aspose 收费&#xff0c;不考虑 第…

Java高频面试之JVM篇

说一下 Jvm 的主要组成部分&#xff1f;及其作用&#xff1f; 类加载器执行器运行时数据区域本地接口 谈谈对运行时数据区的理解&#xff1f; 堆和栈的区别是什么&#xff1f; 堆中存什么&#xff1f;栈中存什么&#xff1f; 堆总存对象,栈中存局部变量,引用 为什么要把堆…

什么牌子的运动耳机比较好?五款舒适又实用的运动耳机推荐

跑步、健身、游泳……无论你的运动喜好是什么&#xff0c;一款好的运动蓝牙耳机都能为你的运动体验加分。然而&#xff0c;市面上的运动蓝牙耳机品牌众多&#xff0c;如何选择一款既舒适又实用的产品呢&#xff1f;本文将为你提供一些选购运动蓝牙耳机建议&#xff0c;并为你推…

数字时代的新风向标:海外网红营销与年轻一代的话题热潮

随着互联网的不断普及和社交媒体的迅猛发展&#xff0c;海外网红营销已成为引领年轻一代话题热潮的重要力量。这一趋势不仅改变了传统营销模式&#xff0c;更深刻地影响了年轻人的消费观念、审美趣味以及生活方式。本文Nox聚星将和大家探讨海外网红营销如何成功地吸引了年轻人的…

第9章 视图view

第9章 视图view 9.1 视图对象的创建、删除 mysql> create table dept2 as select * from dept; Query OK, 4 rows affected (0.02 sec) Records: 4 Duplicates: 0 Warnings: 0mysql> select * from dept2; ------------------------------ | DEPTNO | DNAME …

智能合约平台开发指南

随着区块链技术的普及&#xff0c;智能合约平台已经成为了这个领域的一个重要趋势。智能合约可以自动化执行合同条款&#xff0c;大大减少了执行和监督合同条款所需的成本和时间。那么&#xff0c;如何开发一个智能合约平台呢&#xff1f;以下是一些关键步骤。 一、选择合适的区…

mysql重启失败

服务器重启了一下&#xff0c;然后启动后发现mysql自动启动没有生效&#xff0c;于是手动通过systemctl启动mysqld&#xff0c;然后就报错:Starting MySQL...........The server quit without updating P[FAILED](/data/mysql/iz2zebvmy1qv3fao9c5riuz.pid). 根据配置my.cnf文…

为什么选择成为程序员?

目录 兴趣和热爱高薪和就业机会持续学习和不断成长挑战和乐趣 兴趣和热爱 许多人选择成为程序员可能是热爱&#xff0c;对计算机&#xff0c;以及编程和科技产生了浓厚的兴趣&#xff0c;并且享受着解决每一个技术问题&#xff0c;构建应用程序和探索新技术所带来的乐趣。 谈到…

二进制ip地址如何进行掩码网络地址和cidr划分?

看到网上有人问下面的问题&#xff1a; 解答过程&#xff1a; 首先这是一个默认的abc类地址进行cidr变长掩码划分的问题。 首先我们知道&#xff0c;ip地址是32位二进制&#xff0c;为了记忆方便每8位分成四段&#xff0c;用0-255和符号.来表示如192.168.1.100 ip地址具有寻址…

海外媒体发稿:新加坡 Asia One VS新加坡sg雅虎

海外媒体发稿&#xff1a;新加坡 Asia One VS新加坡sg雅虎 新加坡&#xff1a;雅虎 官网&#xff1a;sy.yahoo.com 官网&#xff1a;asiaone.com/lite 亚洲第一站。是 新加坡的新闻和生活方式网站和新闻聚合器。它是 新加坡第一个纯数字 内容平台&#xff0c;主要为新加坡、…

E8-用户的主题颜色存在了表ColorStyleInfo里

起因 个人习惯是搭测试环境来进行测试。时不时的从生产环境数据库的备份文件还原数据库过来。每次还愿数据库之后&#xff0c;会用SQL语句把用户密码做统一的修改。但由于日常办公需要&#xff0c;往往生产环境和测试环境会同时打开&#xff0c;执行操作的时候只能通过网址来分…

如何优化 SVG 文件以提升加载速度和性能

1. SVG优化基础知识点 SVG优化技巧 压缩SVG文件大小&#xff0c;减少网络传输时间。使用合适的图形编辑工具&#xff0c;优化SVG代码结构和路径。 性能优化 避免过多复杂的SVG元素和嵌套结构&#xff0c;减少DOM操作。使用CSS和JavaScript优化SVG动画效果&#xff0c;减少性能…

解锁ChatGPT的论文写作技巧,让学术之路更顺畅

ChatGPT无限次数:点击直达 html 解锁ChatGPT的论文写作技巧&#xff0c;让学术之路更顺畅 引言 在当今数字化时代&#xff0c;人工智能技术的持续发展为学术界带来了前所未有的便利。其中&#xff0c;自然语言生成模型如ChatGPT在论文写作方面展现出巨大的潜力。本文将探讨…