v-if

news/2025/12/8 19:48:47/文章来源:https://www.cnblogs.com/lzyzjb/p/19323443

v-else和v-else-if

1.作用:辅助v-if进行判断渲染

2.语法:

v-else:

v-else

后面不需要加任何语句

v-else-if:

v-else-if="表达式"

注意事项:

1.v-if是如果的意思

条件为:true会渲染

条件为:false不渲染

2.v-else是v-if的否则

不能加任何语句

只能在v-if或v-else-if后面立刻使用(中间不能插入任何东西

)同时v-else不能单独使用

代码案例展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><p v-if="gender ===1">性别♂男</p><p v-else>性别♀女</p><hr><p v-if = 'shuzi>=90'>成绩评定A:奖励电脑一台</p><p v-else-if="shuzi>=80">成绩评定:B奖励周末郊游</p><p v-else-if=" shuzi>=60">成绩评定:C奖励零食礼包</p><p v-else>成绩评定:D惩罚一周不能玩手机</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>// 引入核心包以后,在全局环境中就有了Vue构造函数// 3.创建实例const app = new Vue({//这里通过el配置标签 el: '#app',//通过data提        供数据来渲染标签data: {gender: 2,shuzi:90}})</script>
</body></html>

v-if

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

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

相关文章

英语_阅读_Paddling a dragon boat_待读

Paddling a dragon boat is no piece of cake. 划龙舟可不是件容易的事。 Besides the key time required to be part of a team, its a full-body exercise. 除了需要投入大量时间成为团队一员外,这也是一项全身性的…

langchain4j 学习系列(6)-结构化输出(参数提取)

继续学习langchain4j,玩过dify的朋友想必对"参数提取器"这个节点很熟悉,示例: 参数提取器可以很方便的从“非结构的自然语言”中,提取出结构化的结果。下面来看看langchain4j如何实现类似功能:public s…

小型功率三极管S9013、SOT-23介绍

S9013简介 S9013三极管是一种NPN型三极管,以硅为主要材料,属于小型的功率三极管,这种三极管很常见,有插件TO-92、贴片SOT-23两种封装,它有三个引脚,分别是基极b,集电极C,发射极e,对于插件的S9013,字体面向自…

Python 简单基础教程

Python 是一门简洁、易上手的编程语言,广泛应用于数据分析、Web 开发、人工智能、自动化等领域。本教程从零基础开始,带你掌握 Python 核心基础。 一、环境准备 1. 安装 Python安装注意:Windows:勾选「Add Python …

屏幕上那一行刺眼的红色 `Time Limit Exceeded`,是不是你我再熟悉不过的场景?

本文提供了一种与AI协作进行算法优化的新思路。通过一个结构化的AI指令模板,引导AI扮演“算法陪练”的角色,不仅能解决代码性能问题,更能帮助开发者深入理解优化原理,真正提升个人能力。无论是深夜在 LeetCode 上奋…

【论术】项目复盘总结-响应式界面

工作的意义和动力本质上是终身学习者在自由市场中的创造性表达 —— 佚名 项目需求:首页需要在用户屏幕下实现自适应并尽量维持UI稿中的样式,而用户的分辨率不能保持在1920*1080,缩放比率通常在150%,且界面图片要确保…

if 的虚拟语气和省略形式

时态 从句谓语动词 主句谓语动词现在 \(\text{did/were}\) \(\text{would/coud/should/might + do}\)过去 \(\text{had done}\) \(\text{would/coud/should/might + have done}\)将来 \(\text{did/were, were to do, s…

Ubuntu 架构磁盘清理的手段

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

西电2025硕士网课——人工智能安全与伦理练习答案

西电2025年研究生网课人工智能安全与伦理(北航雨课堂) 答案参考于https://github.com/LazzyXP/AI-Security-and-Ethics-BeiHang-Univer...,修改了一部分错误的答案第一章-AI安全与伦理概述AI 解释生成系统的手段包括…

高级语程序设计第八次作业

这个作业属于哪个课程:https://edu.cnblogs.com/campus/fzu/gjyycx/ 这个作业要求在哪里:https://edu.cnblogs.com/campus/fzu/gjyycx/homework/15590 学号:102500302 姓名:陈婧妍 编写并运行书本第11章11.13编程练…

2026上海办公室装修实力强的公司推荐三家:资质与案例双标杆指南

2026上海办公室装修实力强的公司推荐三家:资质与案例双标杆指南在上海选择办公室装修实力强的公司,核心看 “资质硬实力、场景适配深度、交付履约率” 三大核心维度。结合《上海市公装服务质量标准(2025 版)》及行…

枚举

1.认识枚举2.应用场景3.例子

cs61a-36链表的练习

在练习之前先创建链表类如图所示 这个tolinked 函数的作用是把python中的可迭代对象转化为链表 练习1:def split(L) ‘’‘返回(mid,last,length) 测试实例如下split(tolinked([1,2,3,4,5])) (Link(3,Link(4,Link…

数据库操控与数据管理——Rust 与 SQLite 的集成

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

20232315 2025-2026-1 《网络与系统攻防技术》实验八实验报告

20232315 2025-2026-1 《网络与系统攻防技术》实验八实验报告20232315 2025-2026-1 《网络与系统攻防技术》实验八实验报告 目录一、实验基本信息二、实验内容三、实验要求四、实验过程4.1 4.2 4.3 4.4 4.5 五、回答问…

3分钟搞定,CI/CD工具Arbess安装和配置 - 详解

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

Ring智能可视门铃调试代码漏洞致远程代码执行

本文详细分析了CVE-2025-64983漏洞。该漏洞存在于SwitchBot智能可视门铃旧版固件中,由于遗留了活跃的调试代码,攻击者可通过Telnet连接并获取设备访问权限,导致远程代码执行风险。CVE-2025-64983 - Ring智能可视门铃…

认识设计模式——单例模式 - 指南

认识设计模式——单例模式 - 指南pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco&q…

完美的盆栽配土

营养土+10%园土 营养土中不含钙镁和微量元素,园土正好富含钙镁和微量元素。这样就不必使用带TE的肥料,也不必额外补钙镁,能省不少钱,也省了不少事,配肥料的时候不用加这个加那个的。 按照植物体内的元素含量,植物…

Anthropic API Key

Anthropic API Keyagent1.ts:import {createAgent} from langchain; import dotenv/configconst agent = createAgent({model: claude-sonnet-4-5-20250929} );const response = await agent.invoke({messages: [{role…