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

news2025/1/16 20:00:03

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>

效果展示

在这里插入图片描述

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

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

相关文章

图解 LeetCode 算法汇总——回溯

图解 LeetCode 算法汇总——回溯

本文首发公众号&#xff1a;小码A梦 回溯算法是一种常见的算法&#xff0c;常见用于解决排列组合、排列问题、搜索问题等算法&#xff0c;在一个搜索空间中寻找所有的可能的解。通过向分支不断尝试获取所有的解&#xff0c;然后找到合适的解&#xff0c;找完一个分支后再往回搜…
阅读更多...
fastadmin的入门

fastadmin的入门

fastadmin入门到完成项目 配置环境 1 运行环境 PHP > 7.2 且 < 7.4 (推荐PHP7.4版本) MySQL > 5.6 且 < 8.0 (需支持innodb引擎) Apache 或 Nginx 使用PHPstudy 运行该项目 写好apache伪静态规则 <IfModule mod_rewrite.c> Options FollowSymlinks -Multi…
阅读更多...
什么是自动化测试po模式，po分层如何实现?

什么是自动化测试po模式，po分层如何实现?

目录 一、什么是PO模式 二、什么是自动化测试框架 三、非PO模式和PO模式优缺点对比 四、如何从0到1搭建PO模型 五、自动化测试框架和PO的关系 六、总结 一、什么是PO模式 全称&#xff1a;page object model 简称&#xff1a;POM/PO PO模式最核心的思想是分层&#xf…
阅读更多...
[BJDCTF2020]ZJCTF，不过如此 preg_replace /e模式漏洞

[BJDCTF2020]ZJCTF，不过如此 preg_replace /e模式漏洞

目录 preg_replace的/e模式 为什么要变为 {${phpinfo()}} 另一个方法 版本 <?phperror_reporting(0); $text $_GET["text"]; $file $_GET["file"]; if(isset($text)&&(file_get_contents($text,r)"I have a dream")){echo &qu…
阅读更多...
蓝桥杯备赛Day8——队列

蓝桥杯备赛Day8——队列

大家好，我是牛哥带你学代码，本专栏详细介绍了蓝桥杯备赛的指南，特别适合迎战python组的小白选手。专栏以天作为单位，定期更新，将会一直更新，直到所有数据结构相关知识及高阶用法全部囊括，欢迎大家订阅本专栏！ 队列也属于基础数据结构。 队列概念 队列是一种数据结构，…
阅读更多...
谷粒学院笔记

谷粒学院笔记

p37 vscode安装插件 p51 前端技术 vue生命周期 前端debug p57 nodejs介绍 下载后安装 cmd node -v node 01.js 类似java运行class文件 nodejs作为服务器(了解)
阅读更多...
树的引进以及二叉树的基础讲解——【数据结构】

树的引进以及二叉树的基础讲解——【数据结构】

W...Y的主页 &#x1f60a; 代码仓库分享 &#x1f495; 当我们学习完前面的数据结构&#xff0c;难度也就会上升&#xff0c;但是这个也是非常重要的数据结构。今天我们来学习一种新的数据类型——树。 目录 树的概念以及结构 树的概念 树的相关概念 树的表示 树在实…
阅读更多...
【项目管理】PM vs PMO 18点区别

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

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

Apache HTTPD （CVE-2017-15715）换行解析漏洞复现

Apache HTTPD 换行解析漏洞 CVE-2017-15715漏洞简介 组件版本漏洞名称 Apache HTTPD 换行解析漏洞&#xff08;CVE-2017-15715&#xff09; 漏洞描述 ​ Apache HTTPD是一款HTTP服务器&#xff0c;它可以通过mod_php来运行PHP网页。其2.4.0~2.4.29版本中存在一个解析漏洞&…
阅读更多...
微信小程序本地生活（列表页面）

微信小程序本地生活（列表页面）

一、实现效果 二、实现步骤 主要实现功能&#xff1a; 页面导航并传参上拉触底时加载下一页数据下拉刷新列表数据 实现步骤 创建列表页面动态设置页面标题定义数据&#xff0c;发起请求获取数据渲染数据并美化样式实现上拉加载数据效果对上拉触底进行节流处理上拉触底请求数…
阅读更多...
SSMP整合综合案例【SpringBoot的基本增删改查】

SSMP整合综合案例【SpringBoot的基本增删改查】

一、基本页面 主页面 添加 删除 分页 条件查询 实体类开发————使用Lombok快速制作实体类 Dao开发————整合MyBatisPlus&#xff0c;制作数据层测试 Service开发————基于MyBatisPlus进行增量开发&#xff0c;制作业务层测试类 Controller开发————基于Restful…
阅读更多...
【计算机网络】什么是WebSocket？

【计算机网络】什么是WebSocket？

目录 WebSocket简介协议优点使用场景 WebSocket WebSocket是一种网络传输协议,可在单个TCP连接上进行全双工通信&#xff0c;位于OSI模型的应用层。 WebSocket使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务器主动向客户端推送数据。在WebSocket API中&a…
阅读更多...
第7篇 vue的模块化与babel的转换

第7篇 vue的模块化与babel的转换

一 babel的转换 1.1 babel的转换 Babel是一个广泛使用的转码器&#xff0c;可以将ES6代码转为ES5代码&#xff0c;从而在现有环境执行执行。 可以现在就用 ES6 编写程序&#xff0c;而不用担心现有环境是否支持。 1.2 案例 1.新建工程&#xff0c;初始化&#xff1a; npm …
阅读更多...
【数字人】使用Mixamo动画资源

【数字人】使用Mixamo动画资源

使用Mixamo动画资源 一、获取资源和数据处理1. 获取资源2. 模型选择3. 绑定骨骼4. 动画检索5. 动画参数二、面向不同平台的处理1. 面向Unity平台的使用2. 面向UE平台的使用Mixamo是一个提供动画资源的在线平台，在游戏、虚拟现实、动画等项目添加高质量的人物动画方面实现降本增…
阅读更多...
java面试题（17）：链表两数相加

java面试题（17）：链表两数相加

两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外&#xff0c;这两个数都不会以 0 开头…
阅读更多...
Unity Asset Bundle Browser 工具

Unity Asset Bundle Browser 工具

Unity Asset Bundle Browser 工具 您可以在 Unity 项目中使用 Asset Bundle Browser 工具能够查看和编辑资源包的配置。 有关更多信息&#xff0c;请参阅 Unity Asset Bundle Browser 文档。 注意&#xff1a;此工具是不受支持的实用程序。查看极大的资源包可能会导致性能下…
阅读更多...
Linux内存管理--smaps内存

Linux内存管理--smaps内存

一、内存的两个概念 了解smaps内存之前要先搞清楚Linux内存管理中的虚拟内存&#xff08;Virtual Memory&#xff09;和驻留内存&#xff08;Resident Memory&#xff09;两个概念。 1、虚拟内存 首先需要强调的是虚拟内存不同于物理内存&#xff0c;虽然两者都包含内存字眼…
阅读更多...
数电课程设计——课设一：加减计数器

数电课程设计——课设一：加减计数器

为了帮助大家更好学习FPGA硬件语言&#xff0c;创立此资源 包含文件有&#xff1a;实验报告、仿真文件&#xff0c;资料很全&#xff0c;有问题可以私信 一、实验内容 1、利用QuartusII和Modelsim实现100进制可逆计数器编码显示实验。 二、实验步骤 &#xff08;1&#xff…
阅读更多...
GCP Architect之VPN+Network

GCP Architect之VPN+Network

VPN 搜索结果共计:11 [单选]As part of implementing their disaster recovery plan, your company is trying to replicate their production MySQL database from their private data center to their GCP project using a Google Cloud VPN connection. They are experien…
阅读更多...
compressor/limiter/expander/noisegate相关总结

compressor/limiter/expander/noisegate相关总结

一&#xff0c;简介 在学习音频数字信号处理的DRC&#xff08;Dynamic Range Control&#xff09;时&#xff0c;遇到几个概念&#xff0c;分别是compressor/limiter/expander/noisegate&#xff0c;本篇文章谈一谈我对这些模块的理解。 二&#xff0c;Compressor&#xff08…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023