Vue指令:v-else、v-else-if

目录

 

1.语法:

2. 题目

3.页面展示 

4.结构 


1.语法:

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

   2.语法:v-else 、v-esle-if="表达式"

2. 题目

<!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">
        <p v-if="gender==1">性别:♂ 男</p>
        <p v-else>性别:♀ 女</p>
    <hr>
    <p v-if="score>=90">成绩评定A:奖励电脑一台</p>
    <p v-else-if="score>=70">成绩评定B:奖励周末郊游</p>
    <p v-else-if="score>=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>
        const app=new Vue({
            el:"#app",
            data:{
                gender:1,
                score:100
            }
        })

    </script>
</body>
</html>
3.页面展示 

4.结构 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RANSAC(随机抽样一致性算法)

RANSAC&#xff08;随机抽样一致性算法&#xff09;是一种用于估计数学模型参数的迭代方法&#xff0c;尤其适用于包含大量异常值的数据。使用 RANSAC&#xff0c;我们可以找到一个最优的线性拟合&#xff0c;同时最大限度地减少对异常值的影响。接下来&#xff0c;我将给出一个…

群控系统服务端开发模式-应用开发-业务架构逻辑开发第一轮测试

整个系统的第一个层次已经开发完毕&#xff0c;已经有简单的中控&#xff0c;登录、退出、延迟登录时长、黑名单、数据层封装、验证层封装、RSA加解密、Redis等功能&#xff0c;还缺获取个人、角色按钮权限、角色菜单权限功能。角色按钮权限以及角色菜单权限等明后天开发&#…

react基础之reactHooks

文章目录 React Hooks 使用指南常用 Hooks使用规则 小结 React Hooks 使用指南 React Hooks 是 React 16.8 引入的一种新特性&#xff0c;允许在函数组件中使用状态和其他 React 特性&#xff0c;而无需编写类组件。以下是一些基础的 Hooks 及其使用规则。 常用 Hooks useSta…

桑基图在医学数据分析中的更复杂应用示例

桑基图&#xff08;Sankey Diagram&#xff09;能够有效地展示复杂的流动关系&#xff0c;特别适合用于医学数据分析中的多种转归和治疗路径的可视化。接下来&#xff0c;我们将构建一个稍微复杂的示例&#xff0c;展示不同疾病患者在治疗过程中的流动&#xff0c;以及他们的治…

Android15音频进阶之Cuttlefish搭建音频开发环境(九十二)

简介: CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布:《Android系统多媒体进阶实战》🚀 优质专栏: Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏: 多媒体系统工程师系列【原创干货持续更新中……】🚀 优质视频课程:AAOS车载系统+…

koa + sequelize做距离计算(MySql篇)

1.核心思路 1.利用sequelize的fn方法调用MySql原生函数&#xff08;ST_Distance_Sphere 、POINT&#xff09; 2.通MOD过函数将查询到的距离除以1000&#xff0c;这样km就变成了米 &#xff0c;利用FOMAT函数将查询到的结果精确到两位小数 3.这里利用到了MySql的原生函数&…

【Oracle APEX开发小技巧10】CSS样式控制交互式报表列宽和自动换行效果

在实际开发中使用交互式报表可能会出现某些字段的列宽过长&#xff0c;某些字段的列宽只有缩到一角的情况&#xff0c;那么如何解决这种情况呢&#xff1f;有没有方法可以控制交互式报表的列宽呢&#xff1f;下面就来介绍一下解决方法&#xff1a; 页设置-页-CSS-内嵌 输入如下…

IO详解(BIO、NIO、实战案例、底层原理刨析)

文章目录 IO详解&#xff08;BIO、NIO、实战案例、底层原理刨析&#xff09;&#x1f30e; IO&#x1fa90; 同步、异步、阻塞、非阻塞⚡ BIO&#x1f47d; 简介&#x1f60e; 案例 &#x1f680; NIO✈️ 介绍&#x1f697; Buffer&#xff08;缓冲&#xff09;&#x1f6f8; …

#渗透测试#SRC漏洞挖掘# 信息收集-Shodan之搜索语法进阶

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…

Python复习1:

一、数据类型 1.数字&#xff1a;int、float、bool 2.字符串&#xff1a;string 3.列表&#xff1a;list 4.集合&#xff1a;set 5.字典&#xff1a;dictionary 二、Test 1.print输出固定格式 num110 str1"hello world" #输出的固定格式 print("num1%d&…

【MyBatis源码】BoundSql分析

基础 BoundSql是对SQL语句及参数信息的封装&#xff0c;它是SqlSource解析后的结果。Executor组件并不是直接通过StaticSqlSource对象完成数据库操作的&#xff0c;而是与BoundSql交互。BoundSql是对Executor组件执行SQL信息的封装&#xff0c;具体实现代码如下&#xff1a; …

Python爬虫抓取三个网站上的英语每日一句

一、引言 大学英语学习需要巩固高中语法&#xff0c;补充四六级词汇&#xff0c;增加英语语感&#xff0c;提升英语的运用能力。学好英语有很多种方法&#xff0c;采用句子来突破英语语法、词汇、口语和听力的方法简单有效&#xff0c;值得提倡。李阳就是采用这种方法来教授英…

三相LCL并网逆变器—为什么采用LCL滤波器

1.为什么需要滤波器 当前并网逆变器大多采用脉冲宽度调制(PWM)技术&#xff0c;导致桥臂输出的电压中存在开关频率及倍数频率次的谐波电压&#xff0c;进而使得输出到电网的电流中含有谐波。从电网的角度来看&#xff0c;是不希望系统内含有高次谐波的&#xff0c;因为这会影响…

【STM32】按键控制LED 光敏传感器控制蜂鸣器

文章目录 前置知识按键介绍传感器模块硬件电路按键硬件电路传感器模块硬件电路 C语言数据类型在Keil中的对应写法C语言枚举 按键控制LED接线图Hardware文件夹&#xff08;模块化编程&#xff09;LED驱动程序封装Key(按键)驱动程序封装 main.c源文件 光敏传感器控制蜂鸣器接线图…

飞书API-获取tenant_access_token

1.在飞书工作台创建应用&#xff0c;跳到开发者后台&#xff0c;选创建企业自建应用 2.设置并发布应用 必须要发布应用才可以开始使用了&#xff01;&#xff01;&#xff01; 3.调用获取token的API 参考链接&#xff1a; 开发文档 - 飞书开放平台https://open.feishu.cn/do…

SpringBoot篇(自动装配原理)

目录 一、自动装配机制 1. 简介 2. 自动装配主要依靠三个核心的关键技术 3. run()方法加载启动类 4. 注解SpringBootApplication包含了多个注解 4.1 SpringBootConfiguration 4.2 ComponentScan 4.3 EnableAutoConfiguration 5. SpringBootApplication一共做了三件事 …

Rust 力扣 - 48. 旋转图像

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们可以将原矩阵进行水平翻转&#xff0c;然后在沿主对角线进行翻转&#xff0c;就能完成原矩阵沿顺时针方向旋转90o的变换 题解代码 impl Solution {pub fn rotate(matrix: &mut Vec<Vec<i32>&…

ima.copilot:智慧因你而生

在数字化时代&#xff0c;信息的获取、处理和创作已经成为我们日常工作和学习中不可或缺的一部分。腾讯公司推出的ima.copilot&#xff08;简称ima&#xff09;正是为了满足这一需求&#xff0c;它是一款由腾讯混元大模型提供技术支持的智能工作台产品&#xff0c;旨在通过智能…

使用 PyCharm 构建 FastAPI 项目:零基础入门 Web API 开发

使用 PyCharm 构建 FastAPI 项目&#xff1a;零基础入门 Web API 开发 本文提供了一份完整的 FastAPI 入门指南&#xff0c;涵盖从环境搭建、依赖安装到创建并运行一个简单的 FastAPI 应用的各个步骤。通过 FastAPI 和 Uvicorn&#xff0c;开发者可以快速构建现代化的 Web API…

练习LabVIEW第三十五题

学习目标&#xff1a; 刚学了LabVIEW&#xff0c;在网上找了些题&#xff0c;练习一下LabVIEW&#xff0c;有不对不好不足的地方欢迎指正&#xff01; 第三十五题&#xff1a; 使用labview模拟一个3-8译码器 开始编写&#xff1a; 用LabVIEW做3-8译码器首先要知道它是个啥…