在Vue开发中v-if指令和v-show指令的使用介绍,v-if和v-for的优先级以及使用注意事项的介绍

文章目录

      • 一、条件渲染
        • 1、v-if
        • 2、v-else
        • 3、v-else-if
        • 4、\<template> 上的 v-if
        • 5、v-show
      • 二、区别:
        • 1、渲染区别
        • 2、性能区别:
      • 三、v-if和v-for的优先级
      • 四、注意事项

一、条件渲染

1、v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

<h1 v-if="awesome">Vue is awesome!</h1>
2、v-else

你也可以使用 v-else 为 v-if 添加一个“else 区块”。

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no</h1>
3、v-else-if

v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用:

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>

和 v-else 类似,一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。

4、<template> 上的 v-if

因为 v-if 是一个指令,他必须依附于某个元素。但如果我们想要切换不止一个元素呢?在这种情况下我们可以在一个 元素上使用 v-if,这只是一个不可见的包装器元素,最后渲染的结果并不会包含这个 元素。

<template v-if="ok"><h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p>
</template>

v-else 和 v-else-if 也可以在 上使用。

5、v-show

用来按条件显示一个元素的指令是 v-show。其用法基本一样:

<h1 v-show="ok">Hello!</h1>

不同之处在于 v-show 会在 DOM 渲染中保留该元素;v-show 仅切换了该元素上名为 display 的 CSS 属性。

v-show 不支持在 元素上使用,也不能和 v-else 搭配使用。

二、区别:

1、渲染区别
  • v-show 是通过控制display属性来进行dom的显示与隐藏
  • v-if 是真正意义上的条件渲染,为true是渲染(dom存在),为false时不存在(dom不存在)
2、性能区别:
  • v-if有更高的切换开销,v-show有更高的初始渲染开销。
    如果需要频繁的切换,使用v-show比较好,如果运行条件很少改变,使用v-if比较好。
  • v-show比v-if性能更高,因为v-show只能动态的改变样式,不需要增删DOM元素。
    所以当程序不是很大时候,v-if和v-show区别都不大,如果项目很大,推荐多用v-show,较少浏览器后期操作的性能。
  • 需要多种条件场景,比如id=1,=2,=3…时候,因为只有v-if,可以和v-else等连用,这种比较适合用v-if
  • v-show不支持语法
  • v-if切换的时候会实时的销毁和重建内部的事件、钩子函数等,v-show只会初始化渲染时候执行,再切换时候不会执行生命后期的过程。

三、v-if和v-for的优先级

其实在vue2和vue3中的答案是截然相反的。

  • 在vue2中,v-for的优先级高于v-if
  • 在vue3中,v-if的优先级高于v-for

v-if指令用于条件性地渲染一块内容。指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。

v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法,其中items是源数据数组或者对象,而item则是被迭代的数组元素的别名。

在v-for的时候,建议设置key值,并且保证每一个key值都是独一无二的,这便是diff算法进行优化。

四、注意事项

永远不要把 v-if 和 v-for 同时用在同一个元素上,带来性能方面的浪费(每次渲染都会先循环再进行条件判断)

如果避免出现这种情况,则在外层嵌套template(页面渲染不生成dom节点),在这一层进行v-if判断,然后在内部进行v-for循环

<template v-if="isShow"><p v-for="item in items">
</template>

如果条件出现在循环内部,可通过计算属性computed提前过滤掉那些不需要显示的项

computed: {items: function() {return this.list.filter(function (item) {return item.isShow})}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/709317.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java反射机制底层原理

反射机制 这篇文章我是参考了Java 中的反射机制&#xff08;两万字超全详解&#xff09;_java反射-CSDN博客 然后我在这里做一下总结&#xff0c;因为原文章真的很好&#xff0c;我才疏学浅没什么进行补充&#xff0c;只能做出自己的总结并且写一下自己对这个的理解。 原理&…

配置artifactory的反向代理和域名访问

一、概述 在许多情况下&#xff0c;组织会通过反向代理来提供对 Artifactory 的访问。在某些情况下&#xff0c;例如使用 Artifactory 作为 Docker 注册表&#xff0c;这种设置甚至是强制性的。为了简化反向代理的配置&#xff0c;Artifactory 提供了生成反向代理的功能&#x…

实战LangChain(一):构建您的第一个聊天机器人

实战LangChain(一):构建您的第一个聊天机器人 实战LangChain(一):构建您的第一个聊天机器人 文章目录 实战LangChain(一):构建您的第一个聊天机器人引言开始使用1.安装2.使用 openai 构建聊天机器人3.使用千问或者chatglm构建聊天机器人结论引言 doc 地址 简介 |🦜…

户用光伏储能系统组成结构

随着光伏与储能产业的发展和融合&#xff0c;户用光伏储能系统应运而生&#xff0c;“储能”是指电能存储功能&#xff0c;可以保证电网断电或没电的情况下家庭正常用电&#xff0c;提升用电安全性和稳定性。 1.光伏电池板 是光伏系统的核心部分&#xff0c;利用太阳能产生电…

spring boot学习第十三篇:使用spring security控制权限

该文章同时也讲到了如何使用swagger。 1、pom.xml文件内容如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instanc…

vue - - - - - vue3使用draggable拖拽组件

vue3使用draggable拖拽组件 一、组件安装二、插件使用三、遇到的问题1. missing required prop&#xff1a; “itemKey” 一、组件安装 yarn add vuedraggablenext // or npm i -S vuedraggablenext二、插件使用 <template><draggableitem-key"id"class&q…

吴恩达机器学习笔记十三 多分类问题(multiclass) Softmax 神经网络的softmax输出 softmax改进

多分类问题指可能会有多于两个的输出标签&#xff0c;而不只是0或1的问题。 Softmax算法是逻辑回归的一种推广。 例如 y 有四种可能的取值时&#xff1a; 成本函数 例如有十种类别的输出&#xff0c;此时称这个神经网络有一个softmax输出层或上层是softmax层 softmax layer有…

前端 JS 经典:typeof 和 instanceof 区别

1. typeof typeof 用于判断一个变量的数据类型&#xff0c;返回一个表示数据类型的字符串。可以对如下类型进行判断&#xff1a;undefined、boolean、number、string、bigint、symbol、function 和 object。对 null 的判断是object&#xff0c;这是个历史遗留问题。 typeof n…

android高级面试视频,从入门到精通

大佬带你走进Android开发的世界&#xff0c;掌握了这些知识点&#xff0c;学习Android也可以很轻松。 核心分析内容 对于怎么学习Android&#xff0c;主要解决的是3个问题&#xff1a;学什么、怎么学 & 怎么用。 具体如下&#xff1a; 下面&#xff0c;我将带着上述几个问…

解构Kubernetes Service:从基础概念到实战应用场景,全面揭示其核心价值与魅力

在Kubernetes(K8s)的世界里,Service作为集群内部服务发现和负载均衡的关键组件,起着至关重要的作用。今天,我们将深入探讨Kubernetes Service的基础概念、基本特性,并通过一个典型应用场景实例,进一步揭示其在云原生架构中的核心地位。 一、Kubernetes Service基础概念…

视频学习胜过读书吗

现在&#xff0c;网上的课程视频和讲座视频&#xff0c;越来越多。同样的内容&#xff0c;可以读书学习&#xff0c;也可以视频学习&#xff0c;大家喜欢哪一种&#xff1f; 我比较喜欢读书&#xff0c;实在没耐心视频学习。 书籍只要随手一翻&#xff0c;就知道大概的内容了&…

为什么Kafka这么快(Kafka高吞吐、高性能)

文章目录 问什么 Kafka 可以这么快&#xff1f;消息发送端消息存储1.零拷贝机制2.磁盘顺序读写3.稀疏索引4.页缓存5.分区和副本6.分段存储的好处 消息消费 Kafka是分布式消息系统&#xff0c;需要处理海量的消息&#xff0c;Kafka的设计是把所有的消息都写入速度低容量大的硬盘…

宝塔FTP服务设置并结合cpolar内网穿透实现远程传输文件

文章目录 1. Linux安装Cpolar2. 创建FTP公网地址3. 宝塔FTP服务设置4. FTP服务远程连接小结 5. 固定FTP公网地址6. 固定FTP地址连接 宝塔FTP是宝塔面板中的一项功能&#xff0c;用于设置和管理FTP服务。通过宝塔FTP&#xff0c;用户可以创建FTP账号&#xff0c;配置FTP用户权限…

Unity 常用操作

2D素材网站 https://craftpix.net/ https://itch.io/game-assets/tag-2d/tag-backgrounds 3D素材资源网址 https://www.mixamo.com/#/ 场景常用操作&#xff1a; 快捷键&#xff1a;QWER Q&#xff1a;Q键或鼠标中键&#xff0c;可以拉动场景。 W&#xff1a;选中物体后&…

多方面浅谈互联网技术

目录 方向一&#xff1a;物联网技术概述 方向二&#xff1a;物联网技术的应用 方向三&#xff1a;物联网发展所需技术和创新挑战 物联网技术&#xff08;Internet of Things&#xff0c;IoT&#xff09;是一种将各种智能设备、传感器、电子产品等连接起来&#xff0c;通过互…

新闻网站封锁AI爬虫 AI与新闻媒体博弈继续

随着ChatGPT等新兴AI模型的兴起&#xff0c;它们所依赖的网络爬虫正面临来自全球主流新闻网站的大规模封锁。Richard Fletcher博士团队对十个国家主流新闻网站的统计发现&#xff0c;到2023年底&#xff0c;48%的网站屏蔽了OpenAI的爬虫&#xff0c;24%屏蔽了Google的爬虫。那么…

【LeetCode】139. 单词拆分(普通)——代码随想录算法训练营Day46

题目链接&#xff1a;139. 单词拆分 题目描述 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。如果可以利用字典中出现的一个或多个单词拼接出 s 则返回 true。 注意&#xff1a;不要求字典中出现的单词全部都使用&#xff0c;并且字典中的单词可以重复使用。 示例…

010 Linux 进程间通信_匿名管道

前言 本文将会向你介绍匿名管道的原理以及用法&#xff0c;以及管道的使用存在的情况和管道的特性 文章重点 重点&#xff1a;匿名管道的原理&#xff0c;使用情况&#xff0c;以及特性 进程间通信 进程间通信的本质&#xff1a; 让不同的进程先看到同一份资源&#xff0c…

c#使用log4net的3种调用方法

https://blog.csdn.net/summer_top/article/details/107961245 第一步&#xff1a;下载log4net。 右键项目引用&#xff0c;进入管理NuGet包。 搜索log4net&#xff0c;下载安装。 第二步&#xff1a;创建LogHelper类。 public class LogHelper { private LogHelp…