程序员经验分享-hwhale

Vue——v-show的使用——2020.11.18

2023-05-16

一丶v-show

（一）v-show的用法和v-if非常相似，也用于决定一个元素是否渲染
（二）v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？

  • v-if当条件为false时，压根不会有对应的元素在DOM中
  • v-show当条件为false，仅仅是将元素的display属性设置为none而已

（三）开发种如何选择呢？

  • 当需要在显示与隐藏之间切片很频繁时，使用v-show
  • 当只有一次切换时，通过使用v-if

二丶实战代码

<!--作者：key-->
<!--浏览工具：Chrome-->
<!--开发工具：WebStorm-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
<!--  v-if :当条件为false时，包含v-if指令的元素。根本就不会存在dom中-->
  <h2 v-if="isShow">{{message}}</h2>
<!--  v-show: 当条件为false时，v-show只是给我们的元素添加一个行内样式：display:none-->
  <h2 v-show="isShow">{{message}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"Hello Ting,I am Key!",
      isShow:true,
    }
  })
</script>
</body>
</html>

三丶Console交互式展示

在这里插入图片描述

在这里插入图片描述

——大鹏飞兮振八裔，中天摧兮力不济——
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

show

2020

Vue——v-show的使用——2020.11.18 的相关文章

  • ffmpeg av_read_frame返回AVERROR_EOF

    最近在调试的时候总是发现av read frame 返回AVERROR EOF xff0c 但是我这是网络传输rtsp xff0c 怎么会是文件结尾呢 xff0c 网络上搜了一下没结果 xff0c 只能自己看源码了 xff0c 结果发现在t

  • windows10远程登陆切换用户

    在windows10下部署IIS网站时 xff0c 利用Administrator部署过程中总是出现各种问题 xff0c 因此选择用普通账户进行部署 xff0c 由于电脑只能远程登陆 xff0c 这里记录一下 xff0c 作为以后的参考 打

随机推荐

  • 教你如何用Dockerfile自定义构建一个Nodejs环境Docker镜像

    教你如何用Dockerfile自定义构建一个Nodejs环境Docker镜像 注意 xff1a 请先安装Docker工具 废话少说 xff0c 直接上Dockerfile 使用Python3基础镜像 FROM python 3 10 alp

  • Centos7安装mongoDB详细过程

    添加MongoDB的YUM仓库 在终端中执行以下命令 xff0c 添加MongoDB的YUM仓库 xff1a sudo vi etc yum repos d mongodb org 4 4 repo 在打开的文件中 xff0c 输入以下内容

  • python：性能优化（一）

    python性能优化 01 在列表里面计数 性能 xff1a 第二种计数方法比第一种快不要太多 xff0c 因为Python原生的内置函数都是优化过的 xff0c 所以能用原生的计算的时候 xff0c 尽量用原生的函数来计算 xff0c 所

  • 这20个Pandas函数一定要牢记，建议收藏！！

    来自 xff1a Deephub IMBA Pandas 是数据科学社区中使用最广泛的库之一 xff0c 它是一个强大的工具 xff0c 可以进行数据操作 清理和分析 本文将提供最常用的 Pandas 函数以及如何实际使用它们的样例 我们将

  • multipart/form-data方式上传text以及文件，类似微博发照片

    actionUrl 地址 params text参数以及值 files 文件参数以及文件 username 认证用户名 passwd 认证密码 public static String postFile String actionUrl M

  • UOS Deepin Linux 系统引导丢失修复

    本篇文章讲解通俗易懂 xff0c 以全新的方式修复引导 xff0c 但第一次使用可能会比较麻烦 xff0c 适用于Linux小白用户 也适合别的方法看不懂 不会操作 操作无效等情况 xff08 就是那种操作没有一点问题 xff0c 但就是搞

  • 机会总是留给有准备的人

    qqq

  • chrome---分析js、css脚本的使用率

    打开开发者工具 gt 点击三个点 xff08 选More tools xff09 gt 选中coverage gt 点击reload gt 双击脚本 xff08 进去可以看到脚本哪些内容被用到 xff0c 哪些没有被用到 xff09

  • 【Java生产者消费者问题总结】

    java生产者消费者问题总结 1 wait notify方法实现 public class Test private static Integer count 61 0 private final Integer FULL 61 5 定义生

  • Spring知识点总结 Spring基础到深入(持续更新)

    1 概述 Spring是一个开源框架 Spring为简化企业级开发而生 xff0c 使用Spring xff0c JavaBean就可以实现很多以前要靠EJB才能实现的功能 同样的功能 xff0c 在EJB中要通过繁琐的配置和复杂的代码才能

  • L1-020 帅到没朋友 (20分)

    当芸芸众生忙着在朋友圈中发照片的时候 xff0c 总有一些人因为太帅而没有朋友 本题就要求你找出那些帅到没有朋友的人 输入格式 xff1a 输入第一行给出一个正整数N xff08 100 xff09 xff0c 是已知朋友圈的个数 xff1

  • L1-002 打印沙漏 (20分)

    注意 xff1a 不用输出符号后面的空格 AC代码 xff1a include lt iostream gt using namespace std int main int n int sum 61 1 int i 61 1 该行的个数

  • Java 后缀表达式求值

    PositifixExpression类 import java util Stack 后缀表达式求值 public class PostfixExpression extends Thread public static void mai

  • c++-----vector开辟空间

    include lt bits stdc 43 43 h gt using namespace std int main int n 61 3 vector lt int gt c for int i 61 0 i lt n i 43 43

  • c++---string遇到空格读取结束问题

    string类基本的输入函数有如下几个 xff1a 1 xff09 istream amp operator gt gt istream amp string amp 2 xff09 istream amp getline istream

  • android中ScrollView中TextView无法铺满全屏解决方案

    在ScrollView的xml中加入 android fillViewport 61 34 true 34 属性就OK

  • java---HashSet用法

    import java util public class Demo public static void main String args HashSet不允许有重复的元素 主要用于哈希算法确定元素在集合中的位置 Set set 61 n

  • java----setLayout(null)

    未设置Layout时 xff0c java默认为flowLayout布局的 xff0c 设置为null即为清空布局管理器 xff0c 之后添加组件 xff0c 常常是设置组件左上角坐标相对于容器左上角 xff08 0 xff0c 0 xff

  • java mkdir()和mkdirs()区别

    mkdirs 可以建立多级文件夹 xff0c mkdir 只会建立一级的文件夹 xff0c 如下 xff1a new File 34 tmp one two three 34 mkdirs 执行后 xff0c 会建立tmp one two

  • Vue——v-show的使用——2020.11.18

    一丶v show xff08 一 xff09 v show的用法和v if非常相似 xff0c 也用于决定一个元素是否渲染 xff08 二 xff09 v if和v show都可以决定一个元素是否渲染 xff0c 那么开发中我们如何选择呢

热门标签