当前位置: 首页 > news >正文

vue学习之v-if/v-else/v-else-if

v-else/v-else-if

  • 创建 demo7.html,内容如下
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入 vue 脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><!-- DOM区域 --><div id="app"><p>随机数: {{num}}</p><p v-if="num > 0.5">随机数 大于 0.5</p><p v-else>随机数 小于或等于 0.5 </p><hr /><p v-if="type == 'A'">优秀</p><p v-else-if="type == 'B'">良好</p><p v-else-if="type == 'C'">一般</p><p v-else></p><hr /><div v-show="a">测试</div><button @click="a=!a">点击</button></div></body>
<script>const vm = {data: function() {return {num: Math.random(),a: false,type: 'A',}},}const app = Vue.createApp(vm)app.mount('#app')
</script></html>

效果展示

在这里插入图片描述

相关文章:

vue学习之v-if/v-else/v-else-if

v-else/v-else-if 创建 demo7.html,内容如下 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Docum…...

ansible的安装和简单的块使用

目录 一、概述 二、安装 1、选择源 2、安装ansible 3、模块查看 三、实验 1、拓扑​编辑 2、设置组、ping模块 3、hostname模块 4、file模块 ​编辑 5、stat模块 6、copy模块&#xff08;本地拷贝到远程&#xff09; 7、fetch模块与copy模块类似&#xff0c;但作用…...

Android 状态栏显示运营商名称

Android 原生设计中在锁屏界面会显示运营商名称&#xff0c;用户界面中&#xff0c;大概是基于 icon 数量长度显示考虑&#xff0c;对运营商名称不作显示。但是国内基本都加上运营商名称。对图标显示长度优化基本都是&#xff1a;缩小运营商字体、限制字数长度、信号图标压缩上…...

10.Xaml ListBox控件

1.运行界面 2.运行源码 a.Xaml 源码 <Grid Name="Grid1"><!--IsSelected="True" 表示选中--><ListBox x:Name="listBo...

基于vue3和element-plus的省市区级联组件

git地址&#xff1a;https://github.com/ht-sauce/elui-china-area-dht 使用:npm i elui-china-area-dht 默认使用 使用方法 <template><div class"app"><!--默认使用--><elui-china-area-dht change"onChange"></elui-china…...

Paper: 利用RNN来提取恶意软件家族的API调用模式

论文 摘要 恶意软件家族分类是预测恶意软件特征的好方法&#xff0c;因为属于同一家族的恶意软件往往有相似的行为特征恶意软件检测或分类方法分静态分析和动态分析两种&#xff1a; 静态分析基于恶意软件中包含的特定签名进行分析&#xff0c;优点是分析的范围覆盖了整个代码…...

sdkman 安装以及 graalvm安装

sdkman安装以及graalvm安装全过程, (可能需要梯子) tiamTiam-Lenovo:~$ curl -s "https://get.sdkman.io" | bash-syyyyyyys:/yho: -yd./yh/ m..oho. hy ..sh/ :N -/…...

如何正确使用 WEB 接口的 HTTP 状态码和业务状态码?

当设计和开发 Web 接口时&#xff0c;必然会和 HTTP 状态码与业务状态码这两个概念打交道。很多同学可能没有注意过这两个概念或者两者的区别&#xff0c;做得稀里糊涂&#xff0c;接下来详细讲解下二者的定义、区别和使用方法。 HTTP 状态码 HTTP 状态码是由 HTTP 协议定义的…...

Spark【Spark SQL(三)DataSet】

DataSet DataFrame 的出现&#xff0c;让 Spark 可以更好地处理结构化数据的计算&#xff0c;但存在一个问题&#xff1a;编译时的类型安全问题&#xff0c;为了解决它&#xff0c;Spark 引入了 DataSet API&#xff08;DataFrame API 的扩展&#xff09;。DataSet 是分布式的数…...

制作立体图像实用软件:3DMasterKit 10.7 Crack

3DMasterKit 软件专为创建具有逼真 3D 和运动效果的光栅图片而设计&#xff1a;翻转、动画、变形和缩放。 打印机、广告工作室、摄影工作室和摄影师将发现 3DMasterKit 是一种有用且经济高效的解决方案&#xff0c;可将其业务扩展到新的维度&#xff0c;提高生成的 3D 图像和光…...

高校 Web 站点网络安全面临的主要的威胁

校园网 Web 站点的主要安全威胁来源于计算机病毒、内部用户恶意攻击和 破坏、内部用户非恶意的错误操作和网络黑客入侵等。 2.1 计算机病毒 计算机病毒是指编制者在计算机程序中插入的破坏计算机功能或者数据&#xff0c; 影响计算机使用并且能够自我复制的一组计算机指令或…...

vue前端解决跨域

1,首先 axios请求&#xff0c;看后端接口路径&#xff0c;http://122.226.146.110:25002/api/xx/ResxxList&#xff0c;所以baseURL地址改成 ‘/api’ let setAxios originAxios.create({baseURL: /api, //这里要改掉timeout: 20000 // request timeout}); export default s…...

【Cicadaplayer】解码线程及队列实现

4.4分支https://github.com/alibaba/CicadaPlayer/blob/release/0.4.4/framework/codec/ActiveDecoder.h对外:送入多个包,获取一个帧 int send_packet(std::unique_ptr<IAFPacket> &packet, uint64_t timeOut) override;int getFrame(std::u...

把文件上传到Gitee的详细步骤

目录 第一步&#xff1a;创建一个空仓库 第二步&#xff1a;找到你想上传的文件所在的地址&#xff0c;打开命令窗口&#xff0c;git init 第三步&#xff1a;git add 想上传的文件 &#xff0c;git commit -m "给这次提交取个名字" 第四步&#xff1a;和咱们在第…...

基于keras中Lenet对于mnist的处理

文章目录 MNIST导入必要的包加载数据可视化数据集查看数据集的分布开始训练画出loss图画出accuracy图 使用数据外的图来测试图片可视化转化灰度图的可视化可视化卷积层的特征图第一层卷积 conv1 和 pool1第二层卷积 conv2 和 pool2 MNIST MNIST&#xff08;Modified National …...

Python爬虫 教程:IP池的使用

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 一、简介 爬虫中为什么需要使用代理 一些网站会有相应的反爬虫措施&#xff0c;例如很多网站会检测某一段时间某个IP的访问次数&#xff0c;如果访问频率…...

Ansible之playbook剧本

一、playbook概述1.1 playbook 介绍1.2 playbook 组成部分 二、playbook 示例2.1 playbook 启动及检测2.2 实例一2.3 vars 定义、引用变量2.4 指定远程主机sudo切换用户2.5 when条件判断2.6 迭代2.7 Templates 模块1.先准备一个以 .j2 为后缀的 template 模板文件&#xff0c;设…...

unique_ptr的大小探讨

unique_ptr大小和删除器有很大关系&#xff0c;具体区别看如下代码的分析。不要让unique_ptr占用的空间太大&#xff0c;否则不会达到裸指针同样的效果。 #include <iostream> #include <memory> using namespace std;class Widget {int m_x;int m_y;int m_z;publ…...

人工智能TensorFlow PyTorch物体分类和目标检测合集【持续更新】

1. 基于TensorFlow2.3.0的花卉识别 基于TensorFlow2.3.0的花卉识别Android APP设计_基于安卓的花卉识别_lilihewo的博客-CSDN博客 2. 基于TensorFlow2.3.0的垃圾分类 基于TensorFlow2.3.0的垃圾分类Android APP设计_def model_load(img_shape(224, 224, 3)_lilihewo的博客-CS…...

ElementPlus·面包屑导航实现

面包屑导航 使用vue3中的UI框架elementPlus的 <el-breadcrumb> 实现面包屑导航 <template><!-- 面包屑 --><div class"bread-container" ><el-breadcrumb separator">"><el-breadcrumb-item :to"{ path:/ }&quo…...

【项目管理】PM vs PMO 18点区别

导读&#xff1a;项目经理跟PMO主要有哪些区别&#xff1f;首先从定义上了解&#xff0c;然后根据其他维度进行对比分析&#xff0c;基本可以了解这二者的区别&#xff0c;文中罗列18点区别供各位参考。 目录 1、定义 1.1 PMO 1.2 PM 2、两者区别 2.1 ROI 2.2 项目成功率…...

13 Python使用Json

概述 在上一节&#xff0c;我们介绍了如何在Python中使用xml&#xff0c;包括&#xff1a;SAX、DOM、ElementTree等内容。在这一节&#xff0c;我们将介绍如何在Python中使用Json。Json的英文全称为JavaScript Object Notation&#xff0c;中文为JavaScript对象表示法&#xff…...

PDFBOX和ASPOSE.PDF

一、aspose.pdf 文档 https://docs.aspose.com/pdf/java/ 1、按段落分段 /*** docx文本按段分段*/ public static void main(String[] args) {int i 1;try {// 打开文件流FileInputStream file new FileInputStream("I:\\范文.docx");// 创建 Word 文档对象XWPFDo…...

第51节:cesium 范围查询(含源码+视频)

结果示例: 完整源码: <template><div class="viewer"><el-button-group class="top_item"><el-button type=...

YOLOv5改进算法之添加CA注意力机制模块

目录 1.CA注意力机制 2.YOLOv5添加注意力机制 送书活动 1.CA注意力机制 CA&#xff08;Coordinate Attention&#xff09;注意力机制是一种用于加强深度学习模型对输入数据的空间结构理解的注意力机制。CA 注意力机制的核心思想是引入坐标信息&#xff0c;以便模型可以更好地…...

Jmeter系列-阶梯加压线程组Stepping Thread Group详解(6)

前言 tepping Thread Group是第一个自定义线程组但&#xff0c;随着版本的迭代&#xff0c;已经有更好的线程组代替Stepping Thread Group了【Concurrency Thread Group】&#xff0c;所以说Stepping Thread Group已经是过去式了&#xff0c;但还是介绍一下 Stepping Thread …...

图像的几何变换(缩放、平移、旋转)

图像的几何变换 学习目标 掌握图像的缩放、平移、旋转等了解数字图像的仿射变换和透射变换 1 图像的缩放 缩放是对图像的大小进行调整&#xff0c;即 使图像放大或缩小 cv2.resize(src,dsize,fx0,fy0,interpolationcv2.INTER_LINEAR) 参数&#xff1a; src :输入图像dsize…...

计算机网络第四章——网络层(上)

提示&#xff1a;朝碧海而暮苍梧,睹青天而攀白日 文章目录 网络层是路由器的最高层次&#xff0c;通过网络层就可以将各个设备连接到一起&#xff0c;从而实现这两个主机的数据通信和资源共享&#xff0c;之前学的数据链路层和物理层也是将两端连接起来&#xff0c;但是却没有网…...

【MyBatis】一、MyBatis概述与基本使用

Mybatis概述 Mybatis是一个半自动化的框架&#xff0c;需要自己写sql语句&#xff0c;对比JDBC其有耦合性更低的SQL语句与Java代码&#xff0c;各司其职不相互冗杂&#xff0c;对比Hibernate与JPA其又有更灵活的SQL编写能力。 环境搭建 引入相关依赖并打jar包 <dependenc…...

Java事件机制简介 内含面试题

面试题分享 云数据解决事务回滚问题 点我直达 2023最新面试合集链接 2023大厂面试题PDF 面试题PDF版本 java、python面试题 项目实战:AI文本 OCR识别最佳实践 AI Gamma一键生成PPT工具直达链接 玩转cloud Studio 在线编码神器 玩转 GPU AI绘画、AI讲话、翻译,GPU点亮…...

智冠宝企业网站管理系统/seo设置是什么

&#xff08;欢迎分享源网页&#xff0c;禁止未经本人书面许可转载至他处&#xff0c;或进行其他不当使用行为&#xff09;事实上 Android Studio 支持直接使用 NDK&#xff0c;然而网上已有的例子要么是直接在 AS 里写&#xff08;还不一定能在最新版里用&#xff09;&#xf…...

建筑施工平台/河源seo

在程序员职场上&#xff0c;什么样的人最让人反感呢? 是技术不好的人吗?并不是。技术不好的同事&#xff0c;我们可以帮他。 是技术太强的人吗?也不是。技术很强的同事&#xff0c;可遇不可求&#xff0c;向他学习还来不及呢。 真正让人反感的&#xff0c;是技术平平&…...

crm系统的销售管理功能包括/seo外包优化

发表于 2012-01-28 06:20:14 by 月小升这段程序本来是一个图片分切程序外壳&#xff0c;图片分切程序为特定场合使用的小程序&#xff0c;对大家没什么用&#xff0c;特发布package com.buzz.img;import java.import java.import java.awt.FlowLayout;import java.awt.GridLayo…...

网站能获取访问者/seo和sem推广

文档对象模型是用来描述文档&#xff0c;这里的文档&#xff0c;是特指 HTML 文档。同时它又是一个“对象模型”&#xff0c;这意味着它使用的是对象这样的概念来描述 HTML 文档&#xff0c;DOM 也是使用树形的对象模型来描述一个 HTML 文档。 DOM API 大致会包含 4 个部分。 …...

b2b网站举例/深圳关键词自动排名

很多小伙伴都知道python爬虫可以使用BeautifulSoup和request等&#xff0c;但是使用php同时又想爬虫结合他们是很痛苦的&#xff0c;经过小编的尝试找到了一套针对php编程者使用的QueryList。 QueryList 简介 点击查看官方文档QueryList V4 中文文档 QueryList是一套用于内容采…...

wordpress登录前后菜单/网站推广哪家好

2019独角兽企业重金招聘Python工程师标准>>> 对一颗树型结构存储的表进行递归查询&#xff0c;使用navicat for mysql 创建存储过程 pro_show_knowledge&#xff0c; 参数 -- IN rootId int &#xff0c;通过知识点查询所有子节点数据并插入到临时表 tmp_knowled…...