本篇讲 vue 中对 dom 元素节点进行 "显示和隐藏" 的实现方式指令, 即 v-if 和 v-show. 其实一句话就能说明白, v-if 的底层是从 dom 树中增删节点; 而 v-show 的底层是 "display = none" 和 "display = block".

v-if

<!DOCTYPE html>

<html lang="en">

<head>

  <title>v-if</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      data () {

        return { show: true }

      },

      template: `<div v-if="show">hello, youge</div>`

    })

  const vm = app.mount('#root')

  </script>

</body>

</html>

当 show = false 时候, 该元素节点不会进行展示. 查看渲染的代码可以发现, 在这个 root 节点下, 该 div 已经被删除掉了啦, 剩下了一个寂寞.

<-- v-if -->

v-show

<!DOCTYPE html>

<html lang="en">

<head>

  <title>v-show</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      data () {

        return { show: true }

      },

      template: `<div v-show="show">hello, youge</div>`

    })

  const vm = app.mount('#root')

  </script>

</body>

</html>

当 show: false 时, 该元素节点也不会进行展示, 查看渲染的代码可以发现, 在这个 root 节点下, 该 div 还是存在的

<div style="display: none;">hello, youge</div>

如果需要频繁显示和隐藏切换的, 就建议用 v-show, 如果低频操作就用 v-if 这个看个人喜好吧.

v-if | v-else-if | v-else

在 vue 里还提供了一种 if-else 这样的多分支条件来灵活配置哦.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>v-if-else</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      data () {

        return {

          show: true,

          condition_01: false,

          condition_02: true

        }

      },

      template: `

      <div v-show="show">hello, youge</div>

      <div v-if="condition_01">if</div>

      <div v-else-if="condition_02">else-if</div>

      <div v-else>else</div>

      `

    })

  const vm = app.mount('#root')

  </script>

</body>

</html>

需注意的是这里的 v-if, v-else-if 和 v-else 的这三个 dom 节点要连续一起保证这个分支结构的闭环.

最后再来小结一下吧:

  • v-show: 不会删掉 dom元素, 底层是 "display=none", 适用于频繁需要显示或隐藏的场景
  • v-if: 会增删掉 dom 元素节点, 适用于不那么频繁显示隐藏的场景, 如登录呀, 切换主题啥的
  • v-if, v-else-if, v-else: 可以进行分支判断, 这个我倒是在工作中用的不太多

vue3 基础-条件渲染 v-if 和 v-show的更多相关文章

  1. vue基础——条件渲染

    一.v-if 1.1.v-if,v-else 在字符串模板中,比如Handlebars,我们得像这样写一个条件块: HTML <!-- Handlebars 模板 --> {{#if ok ...

  2. vue基础---条件渲染

    (1)v-if条件渲染 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. 可以用 v-else 添加一个“else 块”: ①表达式 <di ...

  3. 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定

    vue基础 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 Example1 <!DOCTYPE html> <html> ...

  4. Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染

    Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style ...

  5. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  6. 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶

    今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...

  7. 第六十三篇：Vue的条件渲染与列表渲染

    好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...

  8. 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage

    SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...

  9. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

  10. POJ 2762 Going from u to v or from v to u? (强连通分量缩点+拓扑排序)

    题目链接:http://poj.org/problem?id=2762 题意是 有t组样例,n个点m条有向边,取任意两个点u和v,问u能不能到v 或者v能不能到u,要是可以就输出Yes,否则输出No. ...

随机推荐

  1. swiper8.x在vue中的wtf

    首先我是想开启鼠标滚动的效果,在官网上发现如下说法 引入就引入吧,引入路径还不说,在网上看其他教程发现路径是 引入完了,怎么办呢,又不会了,官网没有教程,网上的教程全是关于vue-awesome-sw ...

  2. Thymeleaf 嵌套循环

    <label th:each="role:${roles}" class="check-box"> <input th:each=" ...

  3. 搭建个人多机器ssh连接平台

    最近新配了个主机,有了多个设备,ssh连接的功能可以优化很多体验,便又开始鼓捣.以前都是windows连各种linux,比较方便:这次是在windows之间,还是小查了好一会儿,留个记录 SSH连接的 ...

  4. Mac 干净彻底地卸载 MySQL

    前言 卸载MySQL,首先得知道MySQL的路径.默认的话是在/usr/local文件夹下的. 在系统偏好设置面板中可以看到之前安装的MySQL,此时若想卸载MySQL,可以按照如下步骤来. 之前安装 ...

  5. halcon 入门教程（六） 图像匹配（基于形状的模板匹配）与缺陷检测区域定位

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/18783476 有兴趣可以多看其他的halcon教程 halcon 学习教程目录 本篇主要讲一下 ...

  6. JavaScript将时间戳转化为时间

    const timestampToTime= (timestamp) => { const date = new Date(timestamp * 1000); const year = dat ...

  7. Pydantic字段元数据指南：从基础到企业级文档增强

    title: Pydantic字段元数据指南:从基础到企业级文档增强 date: 2025/3/28 updated: 2025/3/28 author: cmdragon excerpt: 通过Py ...

  8. 【JDBC第4章】操作BLOB类型字段

    第4章:操作BLOB类型字段 4.1 MySQL BLOB类型 MySQL中,BLOB是一个二进制大型对象,是一个可以存储大量数据的容器,它能容纳不同大小的数据. 插入BLOB类型的数据必须使用Pre ...

  9. study PostgreSQL【1-PostgreSQL对象】

    1.服务 PostgreSQL是作为一种服务安装在操作系统下.多个PostgreSQL服务可以运行于同一台问你服务器上,但是他们侦听端口不能重复,也不能共享同一个数据存储目录. 2.Database ...

  10. Centos系统云主机中nvme盘不可用解决方法

    本文分享自天翼云开发者社区<Centos系统云主机中nvme盘不可用解决方法>,作者:P****n 问题描述 Linux系统的云主机使用NVMe盘后,出现非预期的慢IO读写,导致系统或者应 ...