Vue-04.指令-v-if和v-show

ops/2024/10/10 17:34:50/

v-if

v-else

v-else-if                   条件性的渲染某元素,判定为true时渲染,否则不渲染

v-show                      根据条件展示某元素,区别在于切换的是display属性的值

 v-if在浏览器中element标签中如果不满足条件就不会渲染展示。

而v-show在浏览器中element标签中如果不满足条件的话,会只渲染,不展示。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-if和v-show</title><script src="js/vue.js"></script>
</head>
<body><div id="app">年龄<input type="text" v-model="age">经判定,为:<span v-if="age>0 && age<= 35">年轻人(35及以下)</span><span v-else-if="age>35 && age<60">中年人(35以上60岁以下)</span><span v-else>老年人(60岁以上)</span><br><br>年龄<input type="text" v-model="age">经判定,为:<span v-show="age>0 && age<= 35">年轻人(35及以下)</span><span v-show="age>35 && age<60">中年人(35以上60岁以下)</span><span v-show="age>=60">老年人(60岁以上)</span>      <!-- show是在element中都展示,但是通过设置display属性=none在视图中隐藏 --></div>
</body>
<script>new Vue({el:"#app",data: {age:20}})
</script>
</html>


http://www.ppmy.cn/ops/93072.html

相关文章

【Datawhale AI夏令营第四期】 魔搭-大模型应用开发方向笔记 Task01 DeepSeek简易AI助手

【Datawhale AI夏令营第四期】 魔搭-大模型应用开发方向 Task01 正处于拿毕业证求职和实习离职期间的过渡期&#xff0c;想着闲着也是闲着&#xff0c;索性拉上本科同学队友报名参加AI比赛&#xff0c;想方设法卷个项目经验出来。 Task1的任务主要是体验从0开始搭建一个AI对…

【AI】算力底座的巨变

生成式 AI 的迅猛演进&#xff0c;推动 AI 基础设施&#xff08;AI Infra&#xff09;加速发展&#xff0c;增长趋势将从大模型专业领域延伸至各行业领域&#xff0c;AI Infra“质量双螺旋”的发展模式将逐步形成&#xff0c;单集群从万卡“量变”至十万卡的同时&#xff0c;集…

电脑文件加密怎么设置?手把手一步一步教给你

电脑文件加密是保护个人隐私和敏感信息的重要手段&#xff0c;可以通过多种方法实现。以下是一些常用的电脑文件加密设置方法&#xff0c;包括使用安企神加密软件的步骤。 一、电脑文件加密的通用方法 1.Windows系统自带加密功能&#xff1a; 选中需要加密的文件或文件夹&…

【日常记录-MySQL】Shell自动登录MySQL并执行SQL脚本

Author&#xff1a;赵志乾 Date&#xff1a;2024-08-09 Declaration&#xff1a;All Right Reserved&#xff01;&#xff01;&#xff01; 1. 简介 在Shell脚本中自动登录MySQL并执行脚本是一个常见的自动化任务&#xff0c;尤其是在数据备份、报表生成或批量数据处理时非常有…

算法训练营第55天|101孤岛的总面积|102沉没孤岛|103水流问题|104.建造最大岛屿

101孤岛的总面积 我的思路&#xff1a;对每一片都求面积&#xff0c;同时递归时判断是否为孤岛。 改进思路&#xff1a;本题要求找到不靠边的陆地面积&#xff0c;那么我们只要从周边找到陆地然后 通过 dfs或者bfs 将周边靠陆地且相邻的陆地都变成海洋&#xff0c;然后再去重…

SPI通信协议

目录 一、SPI简介 二、寻址方式 三、通信过程 四、SPI设备时钟 五、极性和相位 5.1 CPOL0&#xff0c;CPHA0 5.2 CPOL0&#xff0c;CPHA1 5.3 CPOL1&#xff0c;CPHA0 5.4 CPOL1&#xff0c;CPHA1 &#x1f308;你好呀&#xff01;我是 程序猿 &#x1f30c; 2024感谢你…

怎样才算精通 Excel?

最强AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频百万播放量https://aitools.jurilu.com/ 高赞回答很系统&#xff0c;但普通人这么学&#xff0c;没等精通先学废了&#xff01; 4年前&#xff0c;我为了学数据分析&#…

无人机防炸宝典!!

四种易炸环境,你必须知道 避免在GPS信号不好的环境内飞行 在GPS信号弱或不稳定的环境中&#xff0c;无人机可能无法准确判断自身位置&#xff0c;导致飞行不稳定&#xff0c;甚至失控坠机。 注意细小物体 例如&#xff1a;树枝&#xff0c;电线等&#xff0c;这些细小物体往往…