Vue入门-指令学习-v-else和v-else-if

news2024/10/7 11:41:50

v-else和v-else-if

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

语法:v-else v-else-if="表达式"

注意:需要紧挨着v-if一起使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
</head>

<body>
    <div id="app">
        <p v-if="gender===1">男</p>
        <p v-else="gender===2">女</p>
        <hr>
        <p v-if="score >= 90">成绩:A</p>
        <p v-else-if="score >= 80">成绩: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="js/vue.js"></script>

    <script>
        const app = new Vue({
            //通过el配置选择器,指定Vue管理的是哪个盒子
            el: '#app',
            //通过data提供数据
            data: {
                gender: 1,
                score:99
            }

        })
    </script>
</body>

</html>

页面效果:

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

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

相关文章

九大排序之插入排序

1.前言 插入排序是把待排序的记录按其关键码值的大小逐个插入到一个已经排好序的有序序列中&#xff0c;直到所有的记录插入完为止&#xff0c;得到一个新的有序序列 。实际中我们玩扑克牌时&#xff0c;就用了插入排序的思想。 本章重点&#xff1a;主要着重的介绍两种插入排序…

【JavaEE】【多线程】进程与线程的概念

目录 进程系统管理进程系统操作进程进程控制块PCB关键属性cpu对进程的操作进程调度 线程线程与进程线程资源分配线程调度 线程与进程区别线程简单操作代码创建线程查看线程 进程 进程是操作系统对一个正在运行的程序的一种抽象&#xff0c;可以把进程看做程序的一次运行过程&a…

开发自定义starter

环境&#xff1a;Spring Cloud Gateway 需求&#xff1a;防止用户绕过网关直接访问服务器&#xff0c;用户只需引入依赖即可。 1、创建项目 首先创建一个spring boot项目 2、配置pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xm…

国外电商系统开发-运维系统文件上传

文件上传&#xff0c;是指您把您当前的PC电脑上的文件批量的上传到远程服务器上&#xff0c;在这里&#xff0c;您可以很轻松的通过拖动方式上传&#xff0c;只需要动动鼠标就搞定。 第一步&#xff0c;您应该选择要上传的服务器&#xff1a; 选择好了以后&#xff0c;点击【确…

SpringBoot框架下的教育系统开发全解析

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理微服务在线教育系统的相关信息成为必然。开…

毕业设计项目——基于transformer的中文医疗领域命名实体识别(论文/代码)

完整的论文代码见文章末尾 以下为核心内容 摘要 近年来&#xff0c;随着深度学习技术的发展&#xff0c;基于Transformer和BERT的模型在自然语言处理领域取得了显著进展。在中文医疗领域&#xff0c;命名实体识别(Named Entity Recognition, NER)是一项重要任务&#xff0c;旨…

ArkUI中的状态管理

一、MVVM ArkUI提供了一系列装饰器实现ViewModel的能力,如@Prop、@Link、@Provide、LocalStorage等。当自定义组件内变量被装饰器装饰时变为状态变量,状态变量的改变会引起UI的渲染刷新。 在ArkUI的开发过程中,如果没有选择合适的装饰器或合理的控制状态更新范围,可能会导…

《大规模语言模型从理论到实践》第一轮学习笔记

第一章 绪论 本章主要介绍大规模语言模型基本概念、发展历程和构建流程。 大规模语言模型&#xff08;Large Language Models&#xff0c;LLM&#xff09;&#xff0c;也称大语言模型 或大型语言模型。 1.1 大规模语言模型基本概念 1.语言模型&#xff08;Language Model&a…

重学SpringBoot3-集成Redis(五)之布隆过滤器

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-集成Redis&#xff08;五&#xff09;之布隆过滤器 1. 什么是布隆过滤器&#xff1f;基本概念适用场景 2. 使用 Redis 实现布隆过滤器项目依赖Redis 配置…

Spring开发最佳实践之跨域处理

1. 跨域处理 1.1 异常现象 1.2 异常原因分析 跨源资源共享的官方定义如下&#xff1a; 跨源资源共享&#xff08;CORS&#xff0c;Cross Origin Resource Sharing。或通俗地译为跨域资源共享&#xff09;是一种基于 HTTP 头的机制&#xff0c;该机制通过允许服务器标示除了它自…

上海理工大学《2023年+2019年867自动控制原理真题》 (完整版)

本文内容&#xff0c;全部选自自动化考研联盟的&#xff1a;《上海理工大学867自控考研资料》的真题篇。后续会持续更新更多学校&#xff0c;更多年份的真题&#xff0c;记得关注哦~ 目录 2023年真题 2019年真题 Part1&#xff1a;2023年2019年完整版真题 2023年真题 2019年…

Java使用线程池创建线程

一、线程前言 首先我们知道&#xff0c;线程的概念如果不知道可以去看这一篇Java中的线程&#xff0c;我们这篇主要讲述的是Java怎么使用线程池创建线程&#xff0c;首先我们要对线程池有点概念&#xff0c;其实顾名思义&#xff0c;线程池就是有喝多线程的一个池子类似于&…

一书讲透LLM大语言模型,《掌握大型语言模型》,看完我都懵了!

《掌握大型语言模型》 &#xff08;Mastering Large Language Models&#xff09;由Sanket Subhash Khandare撰写&#xff0c;是一本关于大型语言模型&#xff08;LLMs&#xff09;的高级技术、应用、前沿方法和顶尖模型的指南。 这本大模型书已经上传CSDN&#xff0c;朋友们如…

《Windows PE》4.2 绑定导入表

绑定导入表&#xff08;Bound Import Table&#xff09;是文件中的一个数据结构&#xff0c;用于存储已经绑定&#xff08;即完成绑定导入&#xff09;的外部函数的信息。 本节必须掌握的知识点&#xff1a; 绑定导入表数据结构 实例分析 4.2.1 绑定导入表数据结构 绑定导入…

【AIGC】ChatGPT是如何思考的:探索CoT思维链技术的奥秘

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | ChatGPT 文章目录 &#x1f4af;前言&#x1f4af;什么是CoT思维链CoT思维链的背景与技术发展需求 &#x1f4af;CoT思维链的工作原理&#x1f4af;CoT思维链的应用领域&#x1f4af;CoT思维链的优势&#x1f4af;CoT思维…

动态内存管理笔试题

目录 1.第一题1.1如何修改 2.第二题2.1题想2.2深刻理解 3.第三题4.第四题 1.第一题 void GetMemory(char* p) {p (char*)malloc(100); } void Test(void) {char* str NULL;GetMemory(str);strcpy(str, "hello world");printf(str); }请问运⾏Test 函数会有什么样的…

解锁数字化营销成功密码

在趋势部分&#xff0c;列举了移动优先、社交媒体主导、个性化营销、视频营销崛起和数据驱动决策等方面&#xff0c;让读者快速了解数字化营销的发展方向。策略部分强调了明确目标受众、制定整合营销策略、优化用户体验、重视内容营销和社交媒体营销以及利用搜索引擎优化和数据…

jQuery——平滑翻页

平滑翻页 param next true&#xff1a;下一页 false&#xff1a;下一页 本文分享到此结束&#xff0c;欢迎大家评论区相互讨论学习&#xff0c;下一篇继续分享jQuery中循环翻页的学习。

Docker 实践与应用举例

Docker 实践与应用举例 Docker 已经成为现代软件开发和部署中的重要工具&#xff0c;通过容器化技术&#xff0c;开发者可以轻松管理应用的依赖环境、简化部署流程&#xff0c;并实现跨平台兼容性。本篇博客将详细介绍 Docker 的基本概念、实践操作以及应用场景&#xff0c;帮…

工业缺陷检测深度学习方法

工业缺陷检测深度学习方法 基于深度学习的工业缺陷检测方法可以降低传统人工质检的成本, 提升检测的准确性与效率, 因而在智能制造中扮演重要角色, 并逐渐成为计算机视觉领域新兴的研究热点之一. 其被广泛地应用 于无人质检、智能巡检、质量控制等各种生产与运维场景中. 本综述…