Vue 条件渲染 v-if

v-if 指令:用于控制元素的显示或隐藏。

执行条件:当条件为 false 时,会将元素从 DOM 中删除。

应用场景:适用于显示隐藏切换频率较低的场景。

语法格式:

<div v-if="数据">内容</div>

基础用法:

<template><h3>条件渲染 v-if</h3><p v-if="status">内容</p><button @click="status = !status">显示/隐藏</button>
</template><script setup>
import { ref } from "vue";
let status = ref(true);
</script>

效果:

:当条件为 false 时,会将该元素从 DOM 中删除。

 

配合 JS 表达式使用:

<template><h3>条件渲染 v-if</h3><p v-if="num == 5">内容</p><button @click="num++">增加({{ num }})</button>
</template><script setup>
import { ref } from "vue";
let num = ref(0);
</script>

效果:

配合 v-else 和 v-else-if 使用 :

<template><h3>条件渲染 v-else 和 v-else-if</h3><p>当前 num 的值是:{{ num }}</p><button @click="num++">点击num+1</button><p v-if="num == 1">张三</p><p v-else-if="num == 2">李四</p><p v-else-if="num == 3">王五</p><p v-else>你谁呀?</p>
</template><script setup>
import { ref } from "vue";
let num = ref(0);
</script>

 效果:

:v-else 和 v-else-if 必须紧跟在 v-if 的后边,标签之间紧挨着不能被打断。另外 v-else 不需要写执行条件。 

原创作者:吴小糖

创作时间:2023.12.19

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

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

相关文章

ros2 学习03-开发工具vscode 插件配置

VSCode插件配置 为了便于后续ROS2的开发与调试&#xff0c;我们还可以安装一系列插件&#xff0c;无限扩展VSCode的功能。 中文语言包 Python插件 C插件 CMake插件 vscode-icons ROS插件 Msg Language Support Visual Studio IntelliCode URDF Markdown All in One VSCode支持的…

技术探秘:在RISC Zero中验证FHE——由隐藏到证明:FHE验证的ZK路径(1)

1. 引言 开源代码实现见&#xff1a; https://github.com/hashcloak/fhe_risc0_zkvm&#xff08;Rust&#xff09;https://github.com/weikengchen/vfhe-profiled&#xff08;Rust&#xff09;https://github.com/l2iterative/vfhe0&#xff08;Rust&#xff09; L2IV Resea…

两点云相减并保存结果的C++代码实现

C中实现两个点云相减并保存相减结果&#xff0c;可以使用点云库&#xff08;PCL, Point Cloud Library&#xff09;。代码示例展示了如何进行点云相减&#xff0c;并将结果保存为一个新的点云文件。 这个例子使用了PCL中的pcl::KdTreeFLANN来查找一个点云中的点在另一个点云中…

虚拟磁盘扩容

看了acrn内部的磁盘制作、扩容脚本,学习一下 #!/bin/bash # Copyright (C) 2020-2022 Intel Corporation. # SPDX-License-Identifier: BSD-3-Clausebuild_dir="$PWD/build" cloud_image="${build_dir}/focal-server-cloudimg-amd64.img" cloud_image_ur…

基于AT89C52单片机的计算器设计与仿真

点击链接获取Keil源码与Project Backups仿真图&#xff1a; https://download.csdn.net/download/qq_64505944/88637995?spm1001.2014.3001.5503 源码获取 B 源码仿真图课程设计51 摘 要 计算器一般是指“电子计算器”,能进行数学运算的手持机器&#xff0c;拥有集成电路芯…

整合SpringSecurity

目录 前言 数据库设计 用户表 角色表 用户角色表 权限表 角色权限表 插入数据 表的实体类 用户表实体类 角色表实体类 权限表实体类 mapper层接口 UserMapper RoleMapper AuthorityMapper 封装登录信息 统一响应结果 上下文相关类 jwt令牌工具类 依赖导入…

2023.12.17 关于 Redis 的特性和应用场景

目录 引言 Redis 特性 内存中存储数据 可编程性 可扩展性 持久化 支持集群 高可用性 Redis 优势 Redis 用作数据库 Redis 相较于 MySQL 优势 Redis 相较于 MySQL 劣势 Redis 用作缓存 典型场景 Redis 存储 session 信息 Redis 用作消息队列 初心 消息队列的…

Skywalking系列之最新版9.2.0-JavaAgent本地构建

MAC 10.15.7IDEA 2021.2skywalking-agent 9.2.0-SNAPSHOTJDK 17/21 (最新的代码要看最新的要求&#xff0c;注意不能使用JDK8&#xff0c;会构建失败)Maven 3.6.0 关于本地构建JavaAgent源码 1、获取源码&#xff0c;加载submodule 分步执行&#xff1a; git clone https:/…

智能优化算法应用:基于适应度相关算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于适应度相关算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于适应度相关算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.适应度相关算法4.实验参数设定5.算法…

构建高效统一的音视频联动融合通信调度平台

在信息技术日益高度发展的今天&#xff0c;越来越多的企业或者组织机构重视如何提高内外部的工作效率&#xff0c;但由于传统的通信方式如电话、邮件、短信、传真等方式无法满足企业高效、快速的沟通要求&#xff0c;因此需要一个可以将各种通信方式结合在一起的通信系统来满足…

动态规划 - 740. 删除并获得点数(C#和C实现)

动态规划 - 740. 删除并获得点数(C#和C实现) 题目描述 给你一个整数数组 nums &#xff0c;你可以对它进行一些操作。 每次操作中&#xff0c;选择任意一个 nums[i] &#xff0c;删除它并获得 nums[i] 的点数。之后&#xff0c;你必须删除每个等于 nums[i] - 1 或 nums[i] …

驭见大模型 智领新征程丨泰迪智能科技荣登2023年度广东省人工智能应用项目风云榜

12月15日&#xff0c;由广东省科学技术厅、广东省工业和信息化厅、广东省人力资源和社会保障厅、广东省政务服务数据管理局、广东省科学技术协会指导&#xff0c;广东省人工智能产业协会主办的2023年粤港澳大湾区人工智能产业大会正式举办&#xff0c;大会以“驭见大模型、智领…

静态独享专线IP怎么设置?使用静态IP怎么上网

随着互联网的普及和发展&#xff0c;越来越多的人开始使用电脑上网。在上网的过程中&#xff0c;IP地址是每个设备与互联网连接的唯一标识。而静态IP地址则是指固定不变的IP地址&#xff0c;它可以让您的电脑在每次连接互联网时都能够获得相同的IP地址&#xff0c;这对于一些需…

PTFE四氟托盘应用于化工、医药、食品行业

PTFE托盘是一种广泛应用于化工、医药、食品等行业的特种托盘&#xff0c;采用聚四氟乙烯&#xff08;PTFE&#xff09;材料制造而成。PTFE是一种具有出色耐腐蚀性、高温稳定性和优异物理特性的材料。 PTFE托盘在化工领域中被广泛应用&#xff0c;主要用于处理腐蚀性的化学物质。…

【leetcode876】链表的中间结点Java代码讲解

12.19 链表的中间结点 给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[3,4,5] 解释&#xff1a;链表只有一个中间结点&a…

工作纪实38-排查cpu彪高

昨天晚上上线了一个服务&#xff0c;第二天发现CPU持续飙高到70&#xff5e;90%&#xff0c;触发平台的自动扩容&#xff0c;后定位出问题后降低到3% 怀疑部分代码使用的线程在持续工作没有释放&#xff08;死循环&#xff09;进入机器&#xff0c;使用top -H 找出系统中使用C…

接口自动化测试难点:数据库验证解决方案

接口自动化中的数据库验证&#xff1a;确保数据的一致性和准确性 接口自动化测试是现代软件开发中不可或缺的一环&#xff0c;而数据库验证则是确保接口返回数据与数据库中的数据一致性的重要步骤。本文将介绍接口自动化中的数据库验证的原理、步骤以及示例代码&#xff0c;帮…

机器学习 | 贝叶斯方法

不同于KNN最近邻算法的空间思维&#xff0c;线性算法的线性思维&#xff0c;决策树算法的树状思维&#xff0c;神经网络的网状思维&#xff0c;SVM的升维思维。 贝叶斯方法强调的是 先后的因果思维。 监督式模型分为判别式模型和生成式模型。 判别模型和生成模型的区别&#xf…

【LeetCode刷题-树】--257.二叉树的所有路径

257.二叉树的所有路径 方法&#xff1a;深度优先搜索 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, T…

win环境下启动kafka Port already in use: 6688; nested exception is

背景 zk启动成功后&#xff0c;接下来启动kafka&#xff0c;再启动kafka后一直说端口被占用。 端口占用解决办法: netstat -aon|findstr 9092 taskkill -f -pid 7780 杀掉后&#xff0c;再次启动kafka时&#xff0c;问题并未解决 后来修改了批处理文件kafka-run-class.bat中…