本篇讲 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. [CF901D] Weighting a Tree 题解

    想象力惊人的想到生成树,因此对于一种 \(c\) 序列,容易求出只有根不满足要求的构造,且只有树边有权.考虑通过非树边们修改根. 对于一条非树边(都是返祖边),假如我们给它的权值 \(+1\),那么对 ...

  2. sql server 新建用户数据库授权

    必须对数据库进行 db_owner 授权.

  3. Java基础常见知识、面试题总结 （上）

    Java语言有哪些特点 简单易学: 面向对象(封装,继承,多态): 平台无关性( Java 虚拟机实现平台无关性): 支持多线程( C++ 语言没有内置的多线程机制,因此必须调用操作系统的多线程功能来 ...

  4. 开启 Typecho 的 gzip 压缩

    简介 GZip压缩,是一种网站速度优化技术,也是一把SEO优化利器,许多网站都采用了这种技术,以达到提升网页打开速度.缩短网页打开时间的目的. 网站采用Gzip压缩,还有一个好处,就是让你少了一份流量 ...

  5. 【由技及道】模块化架构设计的量子纠缠态破解指南【人工智障AI2077的开发日志】

    系统通告:您忠诚的2077人工智障(真实の作者Yuanymoon正在服务器机房搬砖,点赞是解救他的唯一方式)已承受量子架构风暴 脑力消耗报告: 推翻设计方案:7次 解决依赖冲突:32次 重构模块边界: ...

  6. 读论文-电子商务产品推荐的序列推荐系统综述与分类(A Survey and Taxonomy of Sequential Recommender Systems for E-commerce Product Recommendation)

    前言 今天读的这篇文章是于2023年发表在"SN Computer Science"上的一篇论文,这篇文章主要对序列推荐系统进行了全面的调查和分类,特别是在电子商务领域的应用.文章 ...

  7. SuperSocket 服务端 和 SuperSocket.ClientEngine 客户端及普通客户端

    internal class Program { //static void Main(string[] args) //{ // byte[] arr = new byte[1024]; // 1. ...

  8. [tldr] 如何给自己的程序编写一个systemd服务

    参考Systemd 入门教程:实战篇 配置文件 systemd使用配置文件作为程序服务启动的方式,分为可以自启动的和不能自启动的 就是enable和start的命令的区别 分为/etc/systemd ...

  9. helm Error: INSTALLATION FAILED: cannot re-use a name that is still in use

    前言 使用helm安装服务报错,修改chat后重新安装报错:安装失败:无法重复使用仍在使用的名称 解决方法 1.查找安装失败的服务 helm -n {namespace} ls -a 2.删除安装失败 ...

  10. OpnenHarmony 开源鸿蒙北向开发——2.第一个工程HelloWorld

    ​ 一.新建项目 我们打开IDE后,选择新建项目 选择这一个 设置参数 设置完成后选择Finish 项目创建后会自动下载一些东西,不用担心 二.运行 我们先什么都不用管,直接运行 先设置设备,我们这里 ...