v-if与v-for为什么不建议一起使用?

news2025/7/8 11:50:27

1、作用
v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。
v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items 形式的特殊语法,其中items是源数据数组或者对象,而item则是被迭代的数组元素的别名。

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

两者在用法上
在这里插入图片描述
二、优先级
v-if与v-for都是vue模板系统中的指令。
在vue模板编译的时候,会将指令系统转化成可执行的render函数。

示例
编写一个p标签,同时使用v-if与v-for
在这里插入图片描述
创建vue实例,存放isShow与items数据
在这里插入图片描述

模板指令的代码都会生成在render函数中,通过app.$options.render就能得到渲染函数

在这里插入图片描述

_l是vue的列表渲染函数,函数内部都会进行一次if判断
初步得到结论:v-for优先级是比v-if高
再将v-for与v-if置于不同标签

在这里插入图片描述

再输出下render函数

在这里插入图片描述

这时候我们可以看到,v-for与v-if作用在不同标签的时候,是先进行判断,再进行列表的渲染。

查看下vue源码
源码位置:\vue-dev\src\compiler\codegen\index.js
在这里插入图片描述

三、注意事项
1、永远不要把v-if和v-for同时用在同一个元素上,带来性能方面的浪费(每次渲染都会先循环再进行条件判断)
2、如果避免出现这种情况,则在外层嵌套template(页面渲染不生成dom节点),在这一层进行v-if判断,然后在内部进行v-for循环。
在这里插入图片描述

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

在这里插入图片描述

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

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

相关文章

JS-获取DOM元素的五种方法

介绍 本文主要介绍通过JS获取DOM元素的5种方法: 根据id名获取元素:getElementById;根据标签名获取元素:getElementsByTagName,返回一个数组;根据类名获取元素:getElementsByClassName,返回一个…

当后端给我返回了302状态码

本文首发于:https://github.com/bigo-frontend/blog/ 欢迎关注、转载。 前言 前段时间接手了一个项目,在代码中看到了这样的一段代码: if (isHTML(data) &&response.request.responseURL?.indexOf(CAS_PREFIX) > -1) {window.l…

cesium简介

文章目录1.什么是Cesium?2.Cesium能做什么?3.Cesium的依赖性4.Cesium学习参考Cesium实战系列文章总目录: 传送门1.什么是Cesium? Cesium是AGI公司计算机图形开发小组与2011年研发的三维地球和地图可视化开源JavaScript库&#xf…

【微信小程序 | 实战开发】实现ES6转ES5开关

个人名片: 🐼作者简介:一名大二在校生,喜欢编程🎋 🐻‍❄️个人主页🥇:小新爱学习. 🐼个人WeChat:hmmwx53 🕊️系列专栏:🖼️ 零基础学Java——小白入门必备重识C语言——复习回顾

Java开发框架选型对比:ruoyi与yudao框架

1、基础开发框架 1.1 什么是基础开发框架? 基础框架可以理解为建立一个项目所需的基础框架,这个基础框架为凝聚了之前开发项目的通用、共性的方法、工具、技术等组成的代码包。 现有我们公司有两类基础框架:(1)基于w…

vue2使用element UI中Descriptions组件的遍历问题

需求描述:展示信息时其中部门区域是未知数量的,需要通过遍历进行展示。如下图举例,其中地址和备注是一一对应关系,需遵循该样式。 问题描述:起初我在el-descriptions中直接使用v-for进行遍历地址和备注两个el-descript…

实现异步的8种方式

前言异步执行对于开发者来说并不陌生,在实际的开发过程中,很多场景多会使用到异步,相比同步执行,异步可以大大缩短请求链路耗时时间,比如:「发送短信、邮件、异步更新等」,这些都是典型的可以通…

Switch语句用法及案例

​ 一、Switch语句用法 switch是多分支语句,用于判断一个表达式的值,然后执行相应的语句。(可以实现多选一) switch语句执行思路:利用表达式的值,来判断执行哪个语句。(简单的来说就是利用我们…

Vue 3 安装及环境配置

Vue 3 安装及环境配置1、安装 Node.js2、配置默认安装目录和缓存日志目录3、配置环境变量4、配置淘宝镜像5、安装 vue 和脚手架6、安装vue-cli 3.x7、创建 vue 3 项目8、可能遇到的问题1、安装 Node.js Node.js 官网:https://nodejs.org/en/download 安装成功后在…

Vue项目实战——实现一个任务清单【基于 Vue3.x 全家桶(简易版)】

Vue3.x 项目实战(一) 内容参考链接Vue2.x全家桶Vue2.x 全家桶参考链接Vue2.x项目(一)Vue2.x 实现一个任务清单Vue2.x项目(二)Vue2.x 实现GitHub搜索案例Vue3.x项目(三)Vue3.x 实现一…

Vue项目部署(Nginx)

本文记录如何将做好的Vue项目部署到服务器上,需要准备: linux系统的服务器或者虚拟机Vue项目打包Nginx服务器的配置和部署1、linux系统准备 本次使用云主机作为部署主机。 2、Vue项目打包 切换到项目所在目录,使用 npm run build 命令完成项目…

深度学习——VGG16模型详解

1、网络结构 VGG16模型很好的适用于分类和定位任务,其名称来自牛津大学几何组(Visual Geometry Group)的缩写。 根据卷积核的大小核卷积层数,VGG共有6种配置,分别为A、A-LRN、B、C、D、E,其中D和E两种是最…

yolov5源码解析(9)--输出

本文章基于yolov5-6.2版本。主要讲解的是yolov5是怎么在最终的特征图上得出物体边框、置信度、物体分类的。 一。总体框架 首先贴出总体框架,直接就拿官方文档的图了,本文就是接着右侧的那三层输出开始讨论。 Backbone: New CSP-Darknet53Neck: SPPF, …

JavaWeb酒店管理系统

酒店管理系统 一、项目介绍 1、项目用到的技术栈 开发工具:idea语言:java、js、htmlajax数据库:MySQL服务器:Tomcat框架:mybatis、jQuery 2、项目实现功能 管理员和用户登录和退出功能以及用户注册功能&#xf…

【第二趴】uni-app开发工具(手把手带你安装HBuilderX、搭建第一个多端项目初体验)

文章目录写在前面HBuilderXHBuilderX 优势HBuilderX 安装uni-app 初体验写在最后写在前面 聚沙成塔——每天进步一点点,大家好我是几何心凉,不难发现越来越多的前端招聘JD中都加入了uni-app 这一项,它也已经成为前端开发者不可或缺的一项技能…

Eolink 治愈了后端开发者的痛

一、前后端的爱恨情仇 最近公司的一个前端同事和一个后端同事吵了一架,事情大概是这样的。后端说要联调接口,前端说你的数据尽量按我的要求来,后端不干,说你这个没用。前端就讲道理呀,传统的前后端分离返回的格式要尽…

【node进阶】深入浅出websocket即时通讯(二)-实现简易的群聊私聊

✅ 作者简介:一名普通本科大三的学生,致力于提高前端开发能力 ✨ 个人主页:前端小白在前进的主页 🔥 系列专栏 : node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 🍀 学习格言: ☀️ 打不倒你的会使你更强&a…

保姆级教程:Ant Design Vue中 a-table 嵌套子表格

前端为Ant Design Vue 版本为1.6.2,使用的是vue2 Ant Design Vue中 a-table 嵌套子表格,说的可能稍微墨迹了点,不过重点内容都说的比较详细,利于新人理解,高手可以自取完整代码 内容概述:完成样式及完整代…

在收到消息后秒级使网站变灰,不改代码不上线,如何实现?

注意:文本不是讲如何将网站置灰的那个技术点,那个技术点之前汶川地震的时候说过。 本文不讲如何实现技术,而是讲如何在第一时间知道消息后,更快速的实现这个置灰需求的上线。 实现需求不是乐趣,指挥别人去实现需求才…

[Vue warn]: Error in render: “TypeError: Cannot read properties of undefined(reading“category1Name“

明明页面正常显示,但是控制台却一直报 如下 错误 [Vue warn]:渲染错误:"TypeError:无法读取未定义的属性(读取category1Name)" 中发现的 Detail 的 vuex 仓库 import { reqDetail } from "/api" export default{actions:{async getDetail({co…