12 Vue3中使用v-if指令实现条件渲染

概述

v-if指令主要用来实现条件渲染,在实际项目中使用得也非常多。

v-if通常会配合v-else-if、v-else指令一起使用,可以达到多个条件执行一个,两个条件执行一个,满足一个条件执行等多种场景。

下面,我们分别演示这三种使用场景。

基本用法

我们创建src/components/Demo12.vue,在这个组件中,我们要:

  • 场景1:v-if单独使用,如果count大于0,则显示“数字大于0了”。
  • 场景2:v-if和v-else配合使用,如果count大于20,则显示“数字大于20了”,否则显示“数字小于或者等于20”
  • 场景3:v-if、v-else-if、v-else配合使用,如果count大于100则显示“数字大于100了”,如果count等于100,则显示“数字等于100了”,否则显示“数字小于100了”

为了便于查看效果,我们还要通过两个按钮,一个按钮控制count的增加,另一个按钮控制count的减少。

代码如下:

<script setup>
import {ref} from "vue";const count = ref(33)
</script>
<template><div v-if="count>0">数字大于0了</div><hr><div v-if="count>20">数字大于20了</div><div v-else>数字小于或者等于20</div><hr><div v-if="count>100">数字大于100了</div><div v-else-if="count===100">数字等于100了</div><div v-else>数字小于100了</div><hr><div><h3>{{ count }}</h3><button @click="count+=10">增加</button><button @click="count-=10">减少</button></div>
</template>

接着,我们修改src/App.vue,引入Demo12.vue并进行渲染:

<script setup>
import Demo from "./components/Demo12.vue"
</script>
<template><h1>欢迎跟着Python私教一起学习Vue3入门课程</h1><hr><Demo/>
</template>

然后,我们浏览器访问:http://localhost:5173/

在这里插入图片描述

完整代码

package.json

{"name": "hello","private": true,"version": "0.1.0","type": "module","scripts": {"dev": "vite","build": "vite build"},"dependencies": {"vue": "^3.3.8"},"devDependencies": {"@vitejs/plugin-vue": "^4.5.0","vite": "^5.0.0"}
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],
})

index.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

src/main.js

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

src/App.vue

<script setup>
import Demo from "./components/Demo12.vue"
</script>
<template><h1>欢迎跟着Python私教一起学习Vue3入门课程</h1><hr><Demo/>
</template>

src/components/Demo12.vue

<script setup>
import {ref} from "vue";const count = ref(33)
</script>
<template><div v-if="count>0">数字大于0了</div><hr><div v-if="count>20">数字大于20了</div><div v-else>数字小于或者等于20</div><hr><div v-if="count>100">数字大于100了</div><div v-else-if="count===100">数字等于100了</div><div v-else>数字小于100了</div><hr><div><h3>{{ count }}</h3><button @click="count+=10">增加</button><button @click="count-=10">减少</button></div>
</template>

启动方式

yarn
yarn dev

浏览器访问:http://localhost:5173/

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

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

相关文章

tamarin manual总结笔记2(tamarin实例)

最初的例子 我们将从一个简单的协议示例开始&#xff0c;该协议仅由两条消息组成&#xff0c;在这里以所谓的Alice-and-Bob表示法编写: C -> S: aenc(k, pkS) C <- S: h(k)在该协议中&#xff0c;客户端C生成一个新的对称密钥k&#xff0c;用服务器S的公钥pkS (aenc代表…

2023 英特尔On技术创新大会直播 |AI科技创新的引路者

英特尔大会 前言英特尔人工智能英特尔创新技术基于英特尔架构的科学计算总结 前言 英特尔技术创新大会是一个令人激动和启发的盛会。在这次大会上&#xff0c;我有幸观看了许多令人瞩目的科技创新和前沿技术的展示。这些展示不仅展示了英特尔作为科技巨头的实力&#xff0c;更…

浏览器原理篇—渲染阻塞

渲染阻塞 1.DOM 的解析 html 文档 边加载边解析 的&#xff1b;网络进程和渲染进程之间会建立一个共享数据的管道&#xff0c;网络进程接收到数据实时传递给渲染进程&#xff0c;渲染进程的 HTML 解析器&#xff0c;它会动态接收字节流&#xff0c;并将其解析为 DOM 2.字节流…

[每周一更]-(第38期):Go常见的操作消息队列

在Go语言中&#xff0c;常见的消息队列有以下几种&#xff1a; RabbitMQ&#xff1a;RabbitMQ是一个开源的AMQP&#xff08;高级消息队列协议&#xff09;消息代理软件&#xff0c;用于支持多种编程语言&#xff0c;包括Go语言。RabbitMQ提供了可靠的消息传递机制和灵活的路由…

基于SSM的在线学习系统的设计与实现论文

基于SSM的在线学习系统的设计与实现 摘要 随着信息互联网购物的飞速发展&#xff0c;一般企业都去创建属于自己的管理系统。本文介绍了在线学习系统的开发全过程。通过分析企业对于在线学习系统的需求&#xff0c;创建了一个计算机管理在线学习系统的方案。文章介绍了在线学习…

【习题】运行Hello World工程

判断题 1. DevEco Studio是开发HarmonyOS应用的一站式集成开发环境。 正确(True)错误(False) 正确(True) 2. main_pages.json存放页面page路径配置信息。 正确(True)错误(False) 正确(True) 单选题 1. 在stage模型中&#xff0c;下列配置文件属于AppScope文件夹的是&am…

信号与线性系统翻转课堂笔记7——信号正交与傅里叶级数

信号与线性系统翻转课堂笔记7——信号正交与傅里叶级数 The Flipped Classroom7 of Signals and Linear Systems 对应教材&#xff1a;《信号与线性系统分析&#xff08;第五版&#xff09;》高等教育出版社&#xff0c;吴大正著 一、要点 &#xff08;1&#xff0c;重点&a…

安全、效率、成本:混合云数据库管理的三重挑战!

随着业务需求的不断演变&#xff0c;数据在多云平台之间流动&#xff0c;给数据库管控带来了新的层次和复杂性。这给数据库管控带来了前所未有的挑战。企业可能面临着一系列问题&#xff0c;包括安全性挑战、管理复杂性、性能与效率问题、成本控制难题、缺乏统一的管理视图以及…

php反序列化漏洞原理、利用方法、危害

文章目录 PHP反序列化漏洞1. 什么是PHP反序列化漏洞&#xff1f;2. PHP反序列化如何工作&#xff1f;3. PHP反序列化漏洞是如何利用的&#xff1f;4. PHP反序列化漏洞的危害是什么&#xff1f;5. 如何防止PHP反序列化漏洞&#xff1f;6. PHP反序列化漏洞示例常见例子利用方法PH…

elementUI CDN引入本地文件报错,刷新页面报错

报错原因&#xff1a;vue.config.js的externals 配置中有外部cdn引入配置&#xff0c;而当前场景我的element是直接下载放在本地的&#xff0c;这时就需要将配置注释或者删除 webpack 中的 externals 配置项用于指定在打包时需要排除掉的模块&#xff0c;这些模块会被视为外部依…

Rust中peekable的使用

在 Rust 中&#xff0c;从迭代器中获取&#xff08;也就是“消费”&#xff09;一个元素时&#xff0c;每次调用 next 方法都会“消费”迭代器的一个元素&#xff0c;这意味着此元素被从迭代器中移除并返回给调用者&#xff0c; 一旦一个元素被消费&#xff0c;它就不能再次从同…

maven下载jar包失败

配置国内镜像 设置国内的仓库,比如: <!--阿里仓库--><mirror><id>alimaven</id><name>aliyun maven</name><url>https://maven.aliyun.com/repository/public/</url><mirrorOf>central</mirrorOf></mirror>…

医学实验室检验科LIS信息系统源码

实验室信息管理是专为医院检验科设计的一套实验室信息管理系统&#xff0c;能将实验仪器与计算机组成网络&#xff0c;使病人样品登录、实验数据存取、报告审核、打印分发&#xff0c;实验数据统计分析等繁杂的操作过程实现了智能化、自动化和规范化管理。 实验室管理系统功能介…

nuxt打包占用磁盘IO

目录 前言排除过程 前言 jenkins运行打包&#xff0c;总是要卡一段时间&#xff0c;磁盘IO很高。我手动执行后的确发现了这个问题&#xff0c;如下图所示。 排除过程 我的方案很原始&#xff0c;利用git恢复到以前的版本&#xff0c;抽检&#xff0c;搞了差不多两个小时&am…

vue中添加change的js事件并根据下拉框内容动态改变另一个组件中的数据(亲测有效)

vue中添加change的js事件并根据下拉框内容动态改变另一个组件中的数据 话不多说看我怎么完成的&#xff0c;以我当前实现的例子演示 我想根据班级下拉框来动态改变报名费内容 具体步骤如下&#xff1a; 1.首先给下拉框的组件加一个change change“changeFeiByclass” 2.在met…

关于Triple DES(3DES)对称加密算法

一、引言 在网络安全领域&#xff0c;对称加密算法作为一种常见的加密手段&#xff0c;被广泛应用于保障数据传输的保密性和完整性。其中&#xff0c;DES&#xff08;Data Encryption Standard&#xff09;算法作为一种经典的对称加密算法&#xff0c;由IBM于1970年代开发&…

mac上使用 Downie 下载网页视频

在今天的数字时代&#xff0c;视频内容在互联网上的传播变得更加普遍和便捷。然而&#xff0c;有时我们可能希望将网页上的视频保存在本地&#xff0c;以便离线观看或与他人分享。Downie 是一款强大而简便的工具&#xff0c;专门设计用于下载网页上的视频内容。本文将介绍 Down…

多维时序 | MATLAB实现SSA-CNN-SVM麻雀算法优化卷积神经网络-支持向量机多变量时间序列预测

多维时序 | MATLAB实现SSA-CNN-SVM麻雀算法优化卷积神经网络-支持向量机多变量时间序列预测 目录 多维时序 | MATLAB实现SSA-CNN-SVM麻雀算法优化卷积神经网络-支持向量机多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | MATLAB实现…

【智慧办公】如何让智能会议室的电子标签实现远程、批量更新信息?东胜物联网硬件网关让解决方案更具竞争力

近年来&#xff0c;为了减少办公耗能、节能环保、降本增效&#xff0c;越来越多的企业开始从传统的办公模式转向智慧办公。 以智能会议室为例&#xff0c;会议是企业业务中不可或缺的一部分&#xff0c;但在传统办公模式下&#xff0c;一来会议前行政人员需要提前准备会议材料…

多相机系统通用视觉 SLAM 框架的设计与评估

Design and Evaluation of a Generic Visual SLAM Framework for Multi-Camera Systems PDF https://arxiv.org/abs/2210.07315 Code https://github.com/neufieldrobotics/MultiCamSLAM Data https://tinyurl.com/mwfkrj8k 程序设置 主要目标是开发一个与摄像头系统配置无关…