Vue3 条件语句

条件判断

v-if

条件判断使用 v-if 指令,指令的表达式返回 true 时才会显示:

<div id="app"><p v-if="seen">现在你看到我了</p>
</div><script>
const app = {data() {return {seen: true /* 改为false,信息就无法显示 */}}
}Vue.createApp(app).mount('#app')
</script>

这里

, v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。

因为 v-if 是一个指令,所以必须将它添加到一个元素上。如果是多个元素,可以包裹在 <template> 元素上,并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

<div id="app"><template v-if="seen"><h1>网站</h1><p>Google</p><p>Runoob</p><p>Taobao</p></template>
</div><script>
const app = {data() {return {seen: true /* 改为false,信息就无法显示 */}}
}Vue.createApp(app).mount('#app')
</script>

v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块:

 

<div id="app"><div v-if="Math.random() > 0.5">随机数大于 0.5</div><div v-else>随机数小于等于 0.5</div>
</div><script>
Vue.createApp(app).mount('#app')
</script>

v-else-if

v-else-if 即 v-if 的 else-if 块,可以链式的使用多次:

<div id="app"><div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><div v-else>Not A/B/C</div>
</div><script>
const app = {data() {return {type: "C" }}
}Vue.createApp(app).mount('#app')
</script>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

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

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

相关文章

mysql面试题50:500台数据库,如何在最快时间之内重启

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:500台db,如何在最快时间之内重启呢? 如果需要在最快时间内重启500台数据库,可以考虑采用并行化和自动化的方法来提高效率。比如: 编写自动化脚…

vh、vw、vmin、vmax

1、分别是什么&#xff1f; vh:指屏幕可见视窗的高&#xff0c; vw:指屏幕可见视窗的宽&#xff0c; vmin:vh和vw之间选较小的值&#xff0c; vmax:vh和vw之间选较大的值。 2、和百分比的区别 百分比时基于父元素的宽高&#xff0c;而vh\vw\vmin\vmax基于屏幕可见视图的宽…

protobuf 插件(option)使用

protobuf的option使用 一、需求 来源于工作中的一个需求&#xff1a;在传递message时需要对message中不同的字段进行不同的处理&#xff0c;而处理方式通过注释标注在了每个字段的定义后。 类似于有下面这样一个消息&#xff1a; 其中字段1是始终需要的&#xff0c;字段2和3…

Mall脚手架总结(五) —— SpringBoot整合MinIO实现文件管理

前言 在项目中我们经常有资源的上传和下载的功能需求&#xff0c;比如用户头像、产品图片、配置文件等等&#xff0c;大数据量的文件存储无疑需要更高性能的数据存储服务&#xff0c;对于无需对结构实现复杂查询的文件对象来说&#xff0c;对象存储服务无疑是一个较好的选择&am…

uniapp编译到小程序Component is not found in path “components/energy/illumination“

Component is not found in path "components/energy/illumination" 直接清除缓存重新编译

Ubuntu下怎么配置vsftpd

2023年10月12日&#xff0c;周四中午 目录 首先要添加一个系统用户然后设置这个系统用户的密码给新创建的系统用户创建主目录启动vsftpd服务查看vsftpd服务的状态打开外界访问vsftpd服务所需的端口获取服务器的IP地址大功告成 首先要添加一个系统用户 useradd 用户名然后设置…

APP备案避坑指南,值得收藏

目录 什么时间节点前需完成备案&#xff1f; APP/小程序一定要做备案吗&#xff1f; 涉及前置审批的APP有哪些&#xff1f; APP 支持安卓、IOS 多个运行平台&#xff0c;应该备案多少次&#xff1f; 企业是自有服务器&#xff0c;该如何进行APP备案&#xff1f; APP备案可…

【Spring框架】Spring监听器的简介和基本使用

目录 一、观察者模式 1.1 模型介绍 1.2 观察者模式Demo 1.2.1 观察者实体 1.2.2 主题实体 1.2.3 测试代码 二、Spring监听器的介绍 2.1 事件&#xff08;ApplicationEvent&#xff09; 2.1.1 Spring内置事件 2.1.2 Spring内置事件 2.2 事件监听器&#xff08;Applic…

C/C++基础讲解(一百三十一)之经典篇(信息合并/平均分数存储)

C/C++基础讲解(一百三十一)之经典篇(信息合并/平均分数存储) 程序之美 前言 很多时候,特别是刚步入大学的学子们,对于刚刚开展的计算机课程基本上是一团迷雾,想要弄明白其中的奥秘,真的要花费一些功夫,我和大家一样都是这么啃过来的,从不知到知知,懵懂到入门,每一步…

三大方法快速发现商业规律

文章目录 三大方法快速发现商业规律一、市场调研二、数据分析三、案例分析 &#x1f4d5;我是廖志伟&#xff0c;一名Java开发工程师、Java领域优质创作者、CSDN博客专家、51CTO专家博主、阿里云专家博主、清华大学出版社签约作者、产品软文创造者、技术文章评审老师、问卷调查…

PHP LFI 利用临时文件Getshell

PHP LFI 利用临时文件 Getshell 姿势-安全客 - 安全资讯平台 LFI 绕过 Session 包含限制 Getshell-安全客 - 安全资讯平台 目录 PHP LFI 利用临时文件Getshell 临时文件 linux 和 windows的 临时文件存储规则 linux和windows对临时文件的命名规则 PHPINFO()特性 原理 条…

Python点击exe后报错:Failed to execute script xxxx问题的解决办法

最近工作在弄人脸识别的问题&#xff0c;从gitee来pull了一个但是发现报了一个Failed to execute script XXX的问题 造成这个问题的原因是执行文件exe存放的目录不对&#xff0c;可能在打包前exe文件并不是存在在这个位置。 解决方案将exe文件尝试存在在不同目录下&#xff…

详解Pinia和Vuex

一、vuex介绍 1.什么是vuex&#xff1f;为什么要使用vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 库。它采用集中式存储管理应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 在vue最重要的就是数据驱动和组件化&#x…

JAVA经典百题之按位与运算符 ``的使用

当学习Java语言中的按位与运算符 & 时&#xff0c;需要理解其用途、应用场景、示例源代码以及相应的注意事项。以下是一篇关于Java语言按位与运算符的详细文章&#xff0c;包括示例源代码和注释。 Java语言中的按位与运算符 & 按位与运算符 & 是Java语言中用于对…

Qt之submodule编译

工作中会遇到这样一种情况&#xff1a;qt应用程序在运行时提示找不到某个qt的动态库。我遇到的是缺少libQt5Websocket.so&#xff0c;因为应用程序是在x86平台银河麒麟v10上开发&#xff0c;能够正常编译运行&#xff0c;然后移植到rk3588&#xff08;aarch64架构&#xff09;上…

文心大模型写——网课点播系统(项目需求)

参考文心大模型写TodoList项目需求 输入 你是一名资深的互联网软件行业产品经理。 现在要设计一个"网课点播系统"项目,它有哪些功能和需求? 分条目写出需求大纲。 输出 设计一个"网课点播系统"项目需要考虑以下功能和需求&#xff1a; 课程管理 课程…

刚参加工作的表弟问我如何设计一个表

文章目录 以公司表模版为基础&#xff0c;确定表名&#xff0c;固定字段不要给字段或者表设置字符集用业务主键还是自增主键创建时间&#xff0c;更新时间要不要使用数据库默认的时间 表弟能问出这个问题&#xff0c;表哥是吃惊又欣慰。吃惊是年纪轻轻的小伙子竟然知道设计表的…

NeuroImage | 右侧颞上回在语义规则学习中的作用:来自强化学习模型的证据

在现实生活中&#xff0c;许多规则的获取通常需要使用语言作为桥梁&#xff0c;特别是语义在信息传递中起着至关重要的作用。另外&#xff0c;个体使用的语言往往具有明显的奖励和惩罚元素&#xff0c;如赞扬和批评。一种常见的规则是寻求更多的赞扬&#xff0c;同时避免批评。…

【翻译】Efficient Data Loader for Fast Sampling-Based GNN Training on Large Graphs

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] 此内容为机器翻译的结果&#xff0c;若有异议的地方&#xff0c;建议查看原文。 机器翻译的一些注意点&#xff0c;比如&#xff1a; 纪元、时代 > epoch工人 > worker火车、培训、训练师 > train Effic…

c# 弹出背景透明图

1. 在窗体中添加 picturebox 控件 2. 在 picturebox 中添加 “png ” 背景透明图&#xff0c;或者GIF图&#xff0c;属性设置如下 3. 在窗体初始化中&#xff0c;添加如下代码 this.BackColor Color.LimeGreen; this.TransparencyKey Color.LimeGreen; 此功能可以用来展示…