Vue-15、Vue条件渲染

news2024/11/16 10:42:02

1、v-show
在Vue中,v-show是一个指令,用于根据表达式的值来控制元素的显示与隐藏。当指令的值为true时,元素显示;当指令的值为false时,元素隐藏。

v-show的用法如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <h1 v-show="isshow">欢迎来到{{name}}</h1>
    <button @click="changeshow">电子显示隐藏/显示</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
        el:"#root",
        data:{
            name:'零壹',
            isshow:true
        },
        methods:{
            changeshow(){
                this.isshow=!this.isshow;
            }
        }
    })
</script>
</body>
</html>

其中,表达式可以是一个计算属性、一个data的属性或者一个方法的返回值。

v-show的特点是,元素仍然存在于DOM中,只是通过修改元素的display属性来控制显示与隐藏。因此,使用v-show隐藏的元素会被渲染到DOM中,只是不可见而已。

与v-show相对的指令是v-if。v-if也用于控制元素的显示与隐藏,但是不同的是,v-if在元素需要隐藏时会将元素从DOM中移除,而不仅仅是隐藏。因此,当元素需要频繁的显示与隐藏时,推荐使用v-show,以提高性能。

2、v-if
在这里插入图片描述

总结:
在这里插入图片描述

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

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

相关文章

【REST2SQL】06 GO 跨包接口重构代码

【REST2SQL】01RDB关系型数据库REST初设计 【REST2SQL】02 GO连接Oracle数据库 【REST2SQL】03 GO读取JSON文件 【REST2SQL】04 REST2SQL第一版Oracle版实现 【REST2SQL】05 GO 操作 达梦 数据库 对所有关系数据的操作都只有CRUD&#xff0c;采用Go 的接口interface{}重构代码…

黑群晖6.x 7.x ABB Active Backup for Business 套件激活方法

注意事项&#xff1a; 要先下载安装好Active Backup for Business套件再操作。SN码在【控制面板】 - 【信息中心】 -【产品序列号】。建议复制到记事本内修改内容。群晖的https是默认的5001端口&#xff0c;如果你的https端口号换过请自行修改&#xff1a;5001 为当前的端口号…

应用在热能表领域中的数字温度传感芯片

热能表&#xff0c;是适用于测量在热交换环路中&#xff0c;被称作载热液体的液体所吸收或转换热能的仪器&#xff0c;它由流量传感器、温度传感器和热能积算仪三部分组成。热量表&#xff08;热表&#xff09;又称热能表、热能积算仪&#xff0c;既能测量供热系统的供热量又能…

Zabbix6.0全套落地方案-基于RHEL9系列源码编译安装-Linux+Nginx+Mysql+Redis生产级模板Agent2客户端一键部署

实践说明&#xff1a;基于RHEL9系列(CentOS9,AlmaLinux9,RockyLinux9等)&#xff0c;但适用场景不限于此&#xff0c;客户端一键部署安装包基于RHEL8和RHEL9。 文档形成时期&#xff1a;2023年 因系统或软件版本不同&#xff0c;构建部署可能略有差异&#xff0c;但本文未做细分…

便携式灯具的UL测试标准UL153介绍

UL153标准&#xff1a;UL153标准主要是描述有关使用电源线及插头作为连接工具,使用120伏电压,15或20安培的电源,并符合美国国家电器规范的便携灯.此标准也适用于那些不用插头,而用一些兼容的接线端作为连接工具的便携灯&#xff0c;同时对于使用非120伏电压&#xff0c;15or20安…

Google I/O大会:Android 13

3个体验升级的方向 以智能手机为场景核心、 扩大智能终端的应用边界以及实现多设备间更好地协同。具体到系统体验层&#xff0c;安卓13将支持图标颜色随主题更换、为不同应用设定使用的语言、新的媒体中心界面等等&#xff0c;同时谷歌也推出了自家的钱包应用&#xff08;Goog…

C++程序员必备的面试技巧

“程序员必备的面试技巧&#xff0c;就像是编写一段完美的代码一样重要。在面试战场上&#xff0c;我们需要像忍者一样灵活&#xff0c;像侦探一样聪明&#xff0c;还要像无敌铁金刚一样坚定。只有掌握了这些技巧&#xff0c;我们才能在面试的舞台上闪耀光芒&#xff0c;成为那…

雪花代码-html版

雪花代码 动画效果 代码 <!DOCTYPE html><html><head><style>body {background-color: #000000;}.snowflake {position: absolute;font-size: 10px;color: #FFFFFF;text-shadow: 1px 1px 1px #000000;user-select: none;}</style></head>…

java基于ssm框架的少儿编程在线培训系统论文

目 录 目 录 I 1 课题背景及研究内容 4 1.1 课题背景 4 1.2 开发目的和意义 4 2 相关技术和应用 4 2.1 VUE技术 4 2.2 Mysql数据库简介 5 2.3 SSM框架简介 6 2.4 Eclipse简介 6 2.5 B/S系统架构 6 3 系统分析 8 3.1可行性分析 8 3.1.1技术可行性 8 3.1.2经济可行性 8 3.1.3操作…

【会议征稿通知】第二届数字化经济与管理科学国际学术会议(CDEMS 2024)

第二届数字化经济与管理科学国际学术会议&#xff08;CDEMS 2024&#xff09; 2024 2nd International Conference on Digital Economy and Management Science&#xff08;CDEMS 2024&#xff09; 2024年第二届数字经济与管理科学国际会议(CDEMS 2024) 定于2023年4月26-28日…

怎么做微信秒杀链接_开启用户的购物新体验

微信秒杀&#xff1a;开启你的购物新体验 在繁忙的生活节奏中&#xff0c;你是否厌倦了长时间排队等待购物&#xff0c;或者在电商平台上漫长而复杂的购物流程&#xff1f;今天&#xff0c;我要向你介绍一种全新的购物方式——微信秒杀。这不仅是一种全新的购物体验&#xff0…

基于SpringBoot的婚恋交友网站 JAVA简易版

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 会员管理模块2.3 新闻管理模块2.4 相亲大会管理模块2.5 留言管理模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 会员信息表3.2.2 新闻表3.2.3 相亲大会表3.2.4 留言表 四、系统展示五、核心代码5.…

git: Updates were rejected because the tip of your current branch is behind

一、报错含义 由于本地分支的tip落后远程分支&#xff0c;push操作被拒绝。 二、产生原因 我再本地拉去了新的分支并未同步到远程仓库&#xff0c;在新分支进行开发&#xff0c;由于前几天同步也创建了该分支并同步到了远程仓库&#xff0c;导致我本次push失败 三、解决方…

使用proteus进行主从JK触发器仿真失败原因的分析

在进行JK触发器的原理分析的时候&#xff0c;我首先在proteus根据主从JK触发器的原理进行了实验根据原理图&#xff0c;如下图&#xff1a; 我进行仿真&#xff0c;在仿真的过程中&#xff0c;我向电路图中添加了外部的置0/1端口&#xff0c;由此在proteus中得到下面的电路图 …

数据库课设--家电销售订单管理系统

1.1课程设计选题 《家电销售订单管理系统》 1.2课程设计的目的 学生在充分理解《数据库应用》课程知识点的基础上&#xff0c;初步掌握将数据库应用于具体的管理信息系统中。把数据库原理、数据库应用有机的结合在一起&#xff0c;以数据库原理的理论为指导设计数据库&#xff…

Vue3 父事件覆盖子事件,Vue2 的 v-on=“$listeners“ 的替代方案

在 Vue3 中&#xff0c;$listeners 被删除 子组件代码&#xff0c;需要特别注意的是事件名为 on 开头&#xff0c;例如 onBack。不确定的可以通过给父组件传递 事件或属性&#xff0c;再打印子组件的 attrs useAttrs()&#xff0c;来确定传值 // template v-bind"newA…

shp文件与数据库(创建shp文件)

前言 前面把shp文件中的内容读取到数据库&#xff0c;接下来就把数据库中的表变成shp文件。 正文 简单的创建一个shp文件 暂时不读取数据库的表&#xff0c;先随机创建一个shp文件。既然是随机的&#xff0c;这就需要使用到faker这个第三方库&#xff0c;代码如下。 impor…

【python,机器学习,nlp】RNN循环神经网络

RNN(Recurrent Neural Network)&#xff0c;中文称作循环神经网络&#xff0c;它一般以序列数据为输入&#xff0c;通过网络内部的结构设计有效捕捉序列之间的关系特征&#xff0c;一般也是以序列形式进行输出。 因为RNN结构能够很好利用序列之间的关系&#xff0c;因此针对自…

Web实战丨基于Django与HTML的新闻发布系统

文章目录 写在前面项目简介项目框架实验内容安装依赖库1.创建项目2.系统配置3.配置视图文件4.配置模型文件5.配置管理员文件6.配置模板文件7.创建数据库8.启动项目 运行结果写在后面 写在前面 本期内容&#xff1a;基于Django与HTML的简单新闻发布系统。 项目需求&#xff1a…

linux高级篇基础理论十一(GlusterFS)

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a; 小刘主页 ♥️不能因为人生的道路坎坷,就使自己的身躯变得弯曲;不能因为生活的历程漫长,就使求索的 脚步迟缓。 ♥️学习两年总结出的运维经验&#xff0c;以及思科模拟器全套网络实验教程。专栏&#xff1a;云计算技…