本篇讲 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. Android 监听短信数据库过滤获取短信内容上传至服务器

    前言 Android 监听短信的方式有两种 1.监听短信数据库,数据库发生改变时回调. 2.监听短信广播 其中第二种方式由于国内各厂家的定制Android 可能导致无响应 目前测试 魅族 无法监听到短 ...

  2. pnpm 安装和使用

    1. 简介 Fast, disk space efficient package manager: Fast. Up to 2x faster than the alternatives (see b ...

  3. 计数类 dp 做题记录（长期更新）

    前言 因为本人太弱,急需锻炼思维,固从现在起开始着手写计数题,并写下题解分析思路的欠缺.另外本文将长时间更新,所以我准备把它置顶,尽量日更! upd on 24.11.6 现版本改成长期更新. P36 ...

  4. 当我老丈人都安装上DeepSeek的时候，我就知道AI元年真的来了！

    关注公众号回复1 获取一线.总监.高管<管理秘籍> 春节期间DeepSeek引爆了朋友圈,甚至连我老丈人都安装了APP,这与两年前OpenAI横空出世很不一样,DeepSeek似乎真的实现 ...

  5. composer 2 升级操作

    update composer composer self-update // or sudo composer self-update 回滚到版本1 composer self-update --r ...

  6. s = 0.5 * a * Math.pow(t,2),关于js动画，从一个公式说起

    s = 0.5 * a* t*t 上边这个是高中物理课本关于位移的计算公式,位移等于二分之一乘以a乘以t的平方,a是加速度,t是运动进行的时间(当然啦,初速度为0).下面我们会应用这个公式完成一个js ...

  7. MySQL查询建表规范

    因为之前一直再查找一些比较好的数据库规范,以方便在开发时连接 MySQL 进行查询/建表的时候,能根据规范来执行,达到提高 查询速度 / 执行 SQL 的性能 和提升 MySQL 的整体性能, 这里主 ...

  8. 什么是HTTP压缩及HTTP压缩的过程

    HTTP压缩是指: Web服务器和浏览器之间压缩传输的"文本内容"的方法. HTTP采用通用的压缩算法,比如gzip来压缩HTML,Javascript, CSS文件. 能大大减少 ...

  9. delphi 让执行程序不在任务栏显示

    Application.MainFormOnTaskbar := False; procedure TForm1.FormShow(Sender: TObject); begin ShowWindow ...

  10. MQ 如何保证数据一致性？

    前言 上个月,我们有个电商系统出了个灵异事件:用户支付成功了,但订单状态死活不改成"已发货". 折腾了半天才定位到问题:订单服务的MQ消息,像人间蒸发一样消失了. 这个Bug让我明 ...