10.Vue2.x条件渲染—v-if、v-show

文章目录

    • 条件渲染—v-if、v-show

条件渲染—v-if、v-show

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>条件渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      img {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <!-- 
      条件渲染：
        v-if:
            适用于：切换频率很低的场景
            特点：不展示的DOM节点直接被删除
        v-show:
            适用于：切换频率很高的场景
            特点：不展示的DOM节点没有被删除，仅仅是使用样式隐藏掉
        严重注意：使用v-if时，DOM节点可能无法获取到，而使用v-show一定可以获取到DOM节点
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
      <h2>今天天气很{{isHot ? '炎热' : '凉爽'}}</h2>
      <!-- <button @click="changeWeather">切换天气</button> -->
      <button @click="isHot=!isHot">切换天气</button>
      <!-- 只要天气炎热，才会展示下面的div -->
      <div v-show="isHot">
        <img src="https://s3.ax1x.com/2020/12/13/reC1IA.jpg" /><br /><br />
        <span>建议：心静自然就会凉</span>
      </div>

      <!-- 只要天气凉爽，才会展示下面的div -->
      <div v-show="!isHot">
        <img src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" /><br /><br />
        <span>建议：建议穿秋裤</span>
      </div>

      <!-- ================================================================ -->
      <!-- 使用v-if、 v-else、 v-else-if做条件渲染 -->
      <div v-if="isHot">
        <img src="https://s3.ax1x.com/2020/12/13/reC1IA.jpg" /><br /><br />
        <span>建议：心静自然就会凉</span>
      </div>
      <!-- 只要天气凉爽，才会展示下面的div -->
      <div v-else>
        <img src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" /><br /><br />
        <span>建议：建议穿秋裤</span>
      </div>
    </div>
    <script>
      new Vue({
        el: "#root",
        data: {
          isHot: true,
        },
        methods: {
          changeWeather() {
            this.isHot = !this.isHot;
          },
        },
      });
    </script>
  </body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

OpenHarmony实战开发-Worker子线程中解压文件。

OpenHarmony实战开发-Worker子线程中解压文件。

介绍 本示例介绍在Worker 子线程使用ohos.zlib 提供的zlib.decompressfile接口对沙箱目录中的压缩文件进行解压操作&#xff0c;解压成功后将解压路径返回主线程&#xff0c;获取解压文件列表。 效果图预览 使用说明 1.点击解压按钮&#xff0c;解压test.zip文件&#xff0c…
阅读更多...
跟着Datawhale重学数据结构与算法

跟着Datawhale重学数据结构与算法

数据结构和算法之前学过&#xff0c;现在跟着Datawhale重学一下&#xff0c;就当是监督自己学习&#xff0c;重新拾起来养成一个好的习惯&#xff0c;以后可以一直坚持下去。 开源链接&#xff1a;【 教程地址 】【电子网站】 首先&#xff1a; #mermaid-svg-Cdr3rn9fGCVAiKS…
阅读更多...
文献速递：深度学习胰腺癌诊断--胰腺癌在CT扫描中通过深度学习检测：一项全国性的基于人群的研究

文献速递：深度学习胰腺癌诊断--胰腺癌在CT扫描中通过深度学习检测：一项全国性的基于人群的研究

Title 题目 Pancreatic Cancer Detection on CT Scans with Deep Learning: A Nationwide Population-based Study 胰腺癌在CT扫描中通过深度学习检测&#xff1a;一项全国性的基于人群的研究 01 文献速递介绍 胰腺癌&#xff08;PC&#xff09;的五年生存率是所有癌症中…
阅读更多...
记一次奇妙的某个edu渗透测试

记一次奇妙的某个edu渗透测试

前话&#xff1a; 对登录方法的轻视造成一系列的漏洞出现&#xff0c;对接口确实鉴权造成大量的信息泄露。从小程序到web端网址的奇妙的测试就此开始。&#xff08;文章厚码&#xff0c;请见谅&#xff09; 1. 寻找到目标站点的小程序 进入登录发现只需要姓名加学工号就能成功…
阅读更多...
什么是线程的上下文切换？

什么是线程的上下文切换？

我们知道使用多线程的目的是为了充分利用多核CPU&#xff0c;比如说我们是16核&#xff0c;但是当创建很多线程比如说160个&#xff0c;CPU不够用了&#xff0c;此时就是一个CPU来应付多个线程&#xff08;这里我们是一个CPU应对10个线程&#xff09;。这个时候&#xff0c;操作…
阅读更多...
【LeetCode每日一题】924. 尽量减少恶意软件的传播（并查集）

【LeetCode每日一题】924. 尽量减少恶意软件的传播（并查集）

文章目录 [924. 尽量减少恶意软件的传播](https://leetcode.cn/problems/minimize-malware-spread/)思路&#xff1a;并查集代码&#xff1a; 924. 尽量减少恶意软件的传播 思路&#xff1a;并查集 构建并查集&#xff1a;首先&#xff0c;代码创建了一个 UnionFind 类来维护节…
阅读更多...
HTML 入门

HTML 入门

HTML 简介 1. 什么是 HTML&#xff1f; 全称&#xff1a;HyperText Markup Language&#xff08;超文本标记语言&#xff09;。 超文本&#xff1a;暂且简单理解为 “超级的文本”&#xff0c;和普通文本比&#xff0c;内容更丰富。 标 记&#xff1a;文本要变成超文本&…
阅读更多...
单例模式五种写法

单例模式五种写法

单例模式五种写法 单例模式有五种写法&#xff1a;饿汉、懒汉、双重检验锁、静态内部类、枚举. 单例模式属于设计模式中的创建型模式 一、单例模式应用场景 windows的task manager(任务管理器)就是很典型的单例模式; windows的recycle bin(回收站)也是典型的单例应用&#…
阅读更多...
防范“AI换脸”风险 ZOLOZ Deeper月超2万次攻防测试

防范“AI换脸”风险 ZOLOZ Deeper月超2万次攻防测试

4 月 16 日&#xff0c;深度伪造&#xff08;Deepfake&#xff09;综合防控产品ZOLOZ Deeper 在北京正式发布&#xff0c;以拦截用户刷脸过程中的“AI换脸”风险&#xff0c;目前已率先应用在身份安全领域。公开资料显示&#xff0c;ZOLOZ是蚂蚁数科的科技品牌&#xff0c;以生…
阅读更多...
电商技术揭秘九：搜索引擎中的SEO数据分析与效果评估

电商技术揭秘九：搜索引擎中的SEO数据分析与效果评估

相关系列文章 电商技术揭秘一&#xff1a;电商架构设计与核心技术 电商技术揭秘二&#xff1a;电商平台推荐系统的实现与优化 电商技术揭秘三&#xff1a;电商平台的支付与结算系统 电商技术揭秘四&#xff1a;电商平台的物流管理系统 电商技术揭秘五&#xff1a;电商平台的个性…
阅读更多...
matplotlib手动调用默认配色

matplotlib手动调用默认配色

matplotlib 画图有个默认配色方案&#xff0c;在画不同图时会保持一致。如&#xff1a; import numpy as np import matplotlib.pyplot as plt# 图 1 数据 x np.arange(12).astype(np.float32) 1 y1 np.log(x) y2 1 / x y3 np.sin(x) # 图 2 数据 a np.random.randn(200…
阅读更多...
关于HTTP1.0、1.1、1.x、2.0、3.0与HTTPS之间的理解

关于HTTP1.0、1.1、1.x、2.0、3.0与HTTPS之间的理解

关于HTTP1.0、1.1、1.x、2.0、3.0与HTTPS之间的理解 HTTP的由来 HTTP是Hyper Text Transfer Protocol&#xff08;超文本传输协议&#xff09;的缩写。它的发展是万维网协会&#xff08;World Wide Web Consortium&#xff09;和Internet工作小组IETF&#xff08;Internet Eng…
阅读更多...
JMeter控制器数据库获取一组数据后遍历输出

JMeter控制器数据库获取一组数据后遍历输出

目录 1、测试计划中添加Mysql Jar包 2、添加线程组 3、添加 jdbc connection configuration 4、添加JDBC Request&#xff0c;从数据库中获取数据 5.获取数据列表&#xff0c;提取所有goodsName信息 6.通过添加控制器遍历一组数据 6.1 方式一&#xff1a;循环控制器方式 …
阅读更多...
Day42:动态规划 LeedCode 01背包 416. 分割等和子集

Day42:动态规划 LeedCode 01背包 416. 分割等和子集

01背包 1.确定dp数组以及下标的含义 dp[i][j]的含义&#xff1a;从下标为[0-i]的物品里任意取&#xff0c;放进容量为j的背包&#xff0c;价值总和最大是多少。 那么可以有两个方向推出来dp[i][j] 2.确定递推公式 不放物品i&#xff1a;由dp[i - 1][j]推出&#xff0c;即背…
阅读更多...
记一次Mysql数据库宕机This could be because you hit a bug.

记一次Mysql数据库宕机This could be because you hit a bug.

Hi I’m Shendi 今天收到消息说所有软件不能用了&#xff0c;网页都打不开&#xff0c;遇到了问题&#xff0c;于是在这里记录一下 记一次Mysql数据库宕机This could be because you hit a bug. 起因 为了节省成本&#xff0c;对于小公司而言服务器数量通常不会太多&#xff…
阅读更多...
网络安全学习路线-超详细

网络安全学习路线-超详细

零基础小白&#xff0c;到就业&#xff01;入门到入土的网安学习路线&#xff01; 在各大平台搜的网安学习路线都太粗略了。。。。看不下去了&#xff01; 建议的学习顺序&#xff1a; 一、网络安全学习普法&#xff08;心里有个数&#xff0c;要进去坐几年&#xff01;&#x…
阅读更多...
FRDM-MCXN947开发板之RGB灯

FRDM-MCXN947开发板之RGB灯

一、背景 RGB LED&#xff1a;通过红、绿、蓝三种颜色组合发光的LED&#xff0c;可以理解由三个不同发光属性的LED组成&#xff0c;这个是LCD平板显示原理的基础&#xff0c;一个LED相当于屏幕上面的一个像素 FRDM-MCXN947集成了一块RGB LED&#xff0c;它由三个GPIO口驱动&am…
阅读更多...
2024 NTFS读写工具Tuxera NTFS for Mac 是如何进行下载、安装、激活的

2024 NTFS读写工具Tuxera NTFS for Mac 是如何进行下载、安装、激活的

本篇将为各位小伙伴们集中讲解一下NTFS读写工具Tuxera NTFS for Mac 是如何进行下载、安装、激活与换机的。 在数字化时代&#xff0c;数据交换和共享变得日益重要。然而&#xff0c;对于Mac用户来说&#xff0c;与Windows系统之间的文件交换可能会遇到一些挑战。这是因为Mac …
阅读更多...
【Markdown】调整图片大小和对齐方式

【Markdown】调整图片大小和对齐方式

插入图片 使用HTML: <img src"./xxx.png" width "xxx" height "xxx" />比如说我们插入一个图片&#xff0c;系统会自动帮我们生成一个图片链接 把这段链接插入即可 <img src"https://img-blog.csdnimg.cn/direct/66da1f6404…
阅读更多...
大模型日报｜今日必读的10篇大模型论文

大模型日报｜今日必读的10篇大模型论文

大家好&#xff0c;今日必读的大模型论文来啦&#xff01; 1.谷歌推出新型 Transformer 架构&#xff1a;反馈注意力就是工作记忆 虽然 Transformer 给深度学习带来了革命性的变化&#xff0c;但二次注意复杂性阻碍了其处理无限长输入的能力。 谷歌研究团队提出了一种新型 T…
阅读更多...
最新文章

Copyright @ 2022~2023