本篇讲 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. 程序员转型AI：行业分析

    系列目录 1.程序员转型AI:行业分析 2.程序员转型AI:转型计划 3.程序员转型AI:落地实践 4.程序员转型AI:展望未来 一.背景分析 进入2025年,AI已经爆发式增长,且进入实际商业变现阶 ...

  2. JavaScript 滚动条滚动到底部才触发按钮是否可用

    应用代码片段: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. Thymeleaf 嵌套循环

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

  4. 5090D-deepseek-Anythingllm-Ollama运行测试

    ollama ollama配置环境变量 ollama地址与镜像 C:\Users\DK>curl http://10.208.10.240:11434 Ollama is running C:\ ...

  5. 八米云-N1盒子、S905系列机顶盒等设备-小白保姆式超详细刷机教程

    线刷准备 这里以魔百盒CM211-1为例,本次刷机用到的零碎工具比较多,不过都是常见刚需设备,大家可以按照清单核对一下. 目前只支持S905 L3.L3a.L2 系列的各种盒子 机顶盒本体 电脑一台 ...

  6. 设计原则&模式：原型模式 Prototype（创建型）

    定义:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象.也就是说,这种不通过new关键字来产生一个对象,而是通过对象复制(Java中的clone或反序列化)来实现的模式,就叫做原型模式. ...

  7. 使用Node.js打造交互式脚手架，简化模板下载与项目创建

    在上一篇文章中,我们探讨了如何构建一个通用的脚手架框架.今天,我们将在此基础上进一步扩展脚手架的功能,赋予它下载项目模板的能力. 通常情况下,我们可以将项目模板发布到 npm 上,或者在公司内部利用私 ...

  8. Linux 通过docker安装nginx，.net core sdk或运行时安装到Linux

    1.Linux docker通过yum安装 https://blog.csdn.net/GMingZhou/article/details/94024453 https://qizhanming.co ...

  9. Easyexcel（5-自定义列宽）

    注解 @ColumnWidth @Data public class WidthAndHeightData { @ExcelProperty("字符串标题") private St ...

  10. xpath 定位表格里面内容

    向上找页面唯一元素,依次为: 表格体/第一行/第14列 实现代码 Xpath==//tbody/tr[1]/td[11]