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;更…

设计模式之-中介者模式,快速掌握中介者模式,通俗易懂的讲解中介者模式以及它的使用场景

系列文章目录 设计模式之-6大设计原则简单易懂的理解以及它们的适用场景和代码示列 设计模式之-单列设计模式&#xff0c;5种单例设计模式使用场景以及它们的优缺点 设计模式之-3种常见的工厂模式简单工厂模式、工厂方法模式和抽象工厂模式&#xff0c;每一种模式的概念、使用…

浏览器原理篇—渲染阻塞

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

Linux下nginx添加stream模块支持Tcp转发

方式1 yum直接安装 安装nginx yum install nginx安装模块 yum install nginx-mod-stream -y添加转发配置 /etc/nginx/nginx.conf底部添加 stream {server {listen 8666;proxy_connect_timeout 360s;proxy_timeout 360s;proxy_pass xxx.xxx.xxx.xxx:8666;} }运行测试 # 运行…

Centos7 openSSL

阅读时长&#xff1a;10分钟 本文内容&#xff1a; 在阿里云Centos7上部署python3.10.6项目时遇到openSSL协议不支持&#xff0c;导致无法下载第三方包 本文目的&#xff1a; 通过手动编译&#xff0c;升级openssl版本centos7 重编译 python3.10.6github下载缓慢解决镜像源记录…

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

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

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

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

机器学习之过拟合和欠拟合

过拟合 概念 过拟合(Overfitting)是机器学习中常见的问题之一,它指的是模型在训练数据上表现很好,但在未见过的新数据上表现较差的情况。过拟合的根本原因是模型过度地适应了训练数据的噪声和细节,而忽略了真实数据的潜在模式。 导致过拟合的一些常见原因和防止方法: …

js字符与ASCII码互转的方法

字符 to ASCII码 var str"A"var c str.charCodeAt()console.log(A ,str.charCodeAt());//65ASCII码 to 字符 var s String.fromCharCode(0x41)//0x4165,直接填65是一样的 console.log(s ,s);//Aint类型 to 字符串 比如var s 0x41424344 0x41 对应 ‘A’ 0x42 对…

【习题】运行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…

【Mysql】哪些sql无法使用到索引

目录 1.使用 OR 连接多个条件&#xff1a; 2.使用 LIKE 通配符 % 作为前缀&#xff1a; 3.使用 BETWEEN 范围查询&#xff1a; 4.使用 ! 或 <> 操作符&#xff1a; 5.使用 DISTINCT 关键字&#xff1a; 6.使用 FUNCTION() 或 EXPRESSION 包含列&#xff1a; 7.使用…

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

随着业务需求的不断演变&#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…