当前位置: 首页 > news >正文

灵活运用Vue指令:探究v-if和v-for的使用技巧和注意事项

  

 🎬 江城开朗的豌豆:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

 📝 个人网站 :《 江城开朗的豌豆🫛 》 

⛺️ 生活的理想,就是为了理想的生活 !

在这里插入图片描述

目录

 ⭐  专栏简介

 📘  文章引言

一、作用

二、优先级

示例

三、注意事项

⭐  写在最后


 ⭐  专栏简介

        欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。

        同时,我们也会关注最新的前端趋势和发展动态。随着Web技术的不断演进,前端开发也在不断推陈出新。我们会及时介绍最新的前端框架、工具和技术,使你能够站在前沿,与时俱进。通过掌握最新的前端技术,你将能够在竞争激烈的Web开发领域中有更大的竞争力。

 📘  文章引言

一、作用

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

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

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

两者在用法上

<Modal v-if="isShow" /><li v-for="item in items" :key="item.id">{{ item.label }}
</li>

二、优先级

v-ifv-for都是vue模板系统中的指令

vue模板编译的时候,会将指令系统转化成可执行的render函数

示例

编写一个p标签,同时使用v-if与 v-for

<div id="app"><p v-if="isShow" v-for="item in items">{{ item.title }}</p>
</div>

创建vue实例,存放isShowitems数据

const app = new Vue({el: "#app",data() {return {items: [{ title: "foo" },{ title: "baz" }]}},computed: {isShow() {return this.items && this.items.length > 0}}
})

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

ƒ anonymous() {with (this) { return _c('div', { attrs: { "id": "app" } }, _l((items), function (item) { return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) }
}

_lvue的列表渲染函数,函数内部都会进行一次if判断

初步得到结论:v-for优先级是比v-if

再将v-forv-if置于不同标签

<div id="app"><template v-if="isShow"><p v-for="item in items">{{item.title}}</p></template>
</div>

再输出下render函数

ƒ anonymous() {with(this){return _c('div',{attrs:{"id":"app"}},[(isShow)?[_v("\n"),_l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)}
}

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

我们再在查看下vue源码

源码位置: \vue-dev\src\compiler\codegen\index.js

export function genElement (el: ASTElement, state: CodegenState): string {if (el.parent) {el.pre = el.pre || el.parent.pre}if (el.staticRoot && !el.staticProcessed) {return genStatic(el, state)} else if (el.once && !el.onceProcessed) {return genOnce(el, state)} else if (el.for && !el.forProcessed) {return genFor(el, state)} else if (el.if && !el.ifProcessed) {return genIf(el, state)} else if (el.tag === 'template' && !el.slotTarget && !state.pre) {return genChildren(el, state) || 'void 0'} else if (el.tag === 'slot') {return genSlot(el, state)} else {// component or element...
}

在进行if判断的时候,v-for是比v-if先进行判断

最终结论:v-for优先级比v-if

三、注意事项

  1. 永远不要把 v-if 和 v-for 同时用在同一个元素上,带来性能方面的浪费(每次渲染都会先循环再进行条件判断)
  2. 如果避免出现这种情况,则在外层嵌套template(页面渲染不生成dom节点),在这一层进行v-if判断,然后在内部进行v-for循环
<template v-if="isShow"><p v-for="item in items">
</template>
  1. 如果条件出现在循环内部,可通过计算属性computed提前过滤掉那些不需要显示的项
computed: {items: function() {return this.list.filter(function (item) {return item.isShow})}
}

⭐  写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!

相关文章:

灵活运用Vue指令:探究v-if和v-for的使用技巧和注意事项

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 ⭐ 专栏简介 &#x1f4d8; 文章引言 一、作…...

nvidia-docker部署pytorch服务【GPU工作站】

文章目录 一、安装 Docker二、安装 NVIDIA Container Toolkit三、宿主机安装 cuda 和 nvidia-driver四、测试一、安装 Docker 可以参考这篇文章 https://blog.csdn.net/weixin_43721000/article/details/124237932 二、安装 NVIDIA Container Toolkit 参考nvidia官方 https:/…...

单链表的实现

CSDN主页&#xff1a;醋溜马桶圈_C语言进阶,初始C语言,数据结构-CSDN博客 Gitee主页&#xff1a;mnxcc (mnxcc) - Gitee.com 专栏&#xff1a;数据结构_醋溜马桶圈的博客-CSDN博客 目录 1.认识单链表 2.创建单链表 3.单链表的操作 3.1打印单链表 3.2开辟新空间 3.3尾插 3.4头插…...

【python】面向对象(类型定义魔法方法)

目录 一、引言 二、类型定义 1、什么是类型的定义&#xff1f; 2、案例 三、魔法方法 1、什么是魔法方法 2、基础部分 3、比较操作 4、容器类型 5、属性管理 6、封装 7、方法拓展 8、继承 9、多态 一、引言 Python是一种面向对象的语言&#xff0c;它支持类&#…...

1.微服务与SpringCloud

微服务和SpringCloud 文章目录 微服务和SpringCloud1.什么是微服务2.SpringCloud3. 微服务 VS SpringCloud4. SpringCloud 组件5.参考文档6.版本要求 1.什么是微服务 微服务是将一个大型的、单一的应用程序拆分成多个小型服务&#xff0c;每个服务实现特定的业务功能&#xff…...

【2023全网最全最火】Selenium WebDriver教程(建议收藏)

在本教程中&#xff0c;我将向您介绍 Selenium Webdriver&#xff0c;它是当今市场上使用最广泛的自动化测试框架。它是开源的&#xff0c;可与所有著名的编程语言&#xff08;如Java、Python、C&#xff03;、Ruby、Perl等&#xff09;一起使用&#xff0c;以实现浏览器活动的…...

dimp 导入dmp文件报错:无效的模式名(DM8:达梦数据库)

dimp 导入dmp文件报错:无效的模式名-DM8:达梦数据库 环境介绍1 搭建A1 数据库52361.1 A1数据库5236创建模式名,表,测试数据1.2 从A1数据库5236导出dmp文件 2 搭建A2数据库52372.1 创建 数据用户ABC2311152.2 在A2 数据库5237 导入DMP(报错无效的模式名)2.3 使用REMAP_SCHEMAABC…...

宿主机无法连接docker里的redis问题解决(生产环境慎用)

宿主机无法连接docker里的redis问题解决&#xff08;生产环境慎用&#xff09; 问题描述解决方案 问题描述 1.连接超时 2.连接能连上但马上断开并报错 3.提示保护模式什么的 (error) DENIED Redis is running in protected mode because protected mode is enabled链接redis …...

给女朋友开发个小程序低价点外卖吃还能赚钱

前言 今天又是无聊的一天,逛了下GitHub,发现一个库里面介绍美团饿了吗外卖红包外卖优惠券,先领红包再下单。外卖红包优惠券,cps分成,别人领红包下单,你拿佣金。哇靠,那我岂不是可以省钱还可以赚钱,yyds。。。。想想都美好哈哈哈!!! 回到正题,这个是美团饿了么分销…...

外贸客户管理系统是什么?推荐的管理软件?

外贸客户管理系统哪个好用&#xff1f;海洋建站如何选管理系统&#xff1f; 外贸客户管理系统&#xff0c;是一款专为外贸企业设计的客户关系管理系统&#xff0c;旨在帮助外贸企业建立与维护客户关系&#xff0c;提高客户满意度和忠诚度&#xff0c;提升企业业绩。海洋建站将…...

数据挖掘:分类,聚类,关联关系,回归

数据挖掘&#xff1a; 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;可能很多算法学生都得去找开发&#xff0c;测开 测开的话&#xff0c;你就得学数据库&#xff0c;sql&#xff0c;oracle&#xff0c;尤其sql要学&…...

力扣labuladong一刷day10一网打尽股票买卖问题共6题

力扣labuladong一刷day10股票买卖问题共6题 一、121. 买卖股票的最佳时机 题目链接&#xff1a;https://leetcode.cn/problems/best-time-to-buy-and-sell-stock/ 思路&#xff1a;只能买入1次&#xff0c;定义dp[i][0]数组表示第i天持有股票时手中的最大金额 数&#xff0c;…...

微信小程序手写table表格

wxml <view class"table"><view class"tr bg-w"><view class"th">张三</view><view class"th" style"color: #409eff;">李四</view><view class"th ">王五</view&…...

UE5 - UI Material Lab 学习笔记

1、学习资料收集 UI Material Lab : https://www.unrealengine.com/marketplace/zh-CN/product/ui-material-lab 视频1&#xff1a;https://www.bilibili.com/video/BV1Hm4y1t7Kn/?spm_id_from333.337.search-card.all.click&vd_source707ec8983cc32e6e065d5496a7f79ee6 视…...

oracle删除重复的数据

去除重复数据&#xff1a; group by 对要比对的字段进行查询是否重复 CREATE TABLE 临时表 AS (select 字段1,字段2,count(*) from 表名 group by 字段1,字段2 having count(*) > 1) 上面这句话就是建立了临时表&#xff0c;并将查询到的数据插入其中。 下面就可以进行…...

Python中的并发编程是什么,如何使用Python进行并发编程?

Python中的并发编程是指使用多线程或多进程来同时执行多个任务。这样可以提高程序的执行效率&#xff0c;特别是在处理I/O密集型任务时。Python提供了多种方式来实现并发编程&#xff0c;如threading模块和multiprocessing模块。 使用Python进行并发编程的方法如下&#xff1a…...

【LeetCode】136. 只出现一次的数字

136. 只出现一次的数字 难度&#xff1a;简单 题目 给你一个 非空 整数数组 nums &#xff0c;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此问题&#xff0c;且该算法只使用…...

HTTP服务器——tomcat的安装和使用

文章目录 前言下载tomcattomcat 文件bin 文件夹conf 文件lib 文件log 文件temp 文件webapps 文件work 目录 如何使用 tomcat 前言 前面我们已经学习了应用层协议 HTTP 协议和 HTTP 的改进版——HTTPS&#xff0c;这些协议是我们在写与服务器相关的代码的时候息息相关的&#x…...

代码随想录Day45 动态规划13 LeetCode T1143最长公共子序列 T1135 不相交的线 T53最大子数组和

LeetCode T1143 最长公共子序列 题目链接:1143. 最长公共子序列 - 力扣&#xff08;LeetCode&#xff09; 题目思路: 动规五部曲分析 1.确定dp数组的含义 这里dp数组的含义是结尾分别为i-1,j-1的text1和text2的最长公共子序列长度 至于为什么是i-1,j-1我之前已经说过了,这里再…...

写了个监控 ElasticSearch 进程异常的脚本!

服务器配置免密钥环境准备&#xff1a; 配置免密钥前&#xff0c;需要在服务器的 hosts 文件中配置目标主机名称与 IP 对应关系。 vim /etc/hosts IP1 hostname1 IP2 hostname2 ...... 将 mianmiyaojiaoben.zip 安装包解压在当前目录下 cd /usr/local/jiaoben unzip mianmi…...

北海穷游必吃的美食哪家好

在北海&#xff0c;海鲜饮食是城市风味的底色。从侨港风情街到南湾夜市&#xff0c;从海鲜大排档到连锁餐饮店&#xff0c;消费者对海鲜的期待始终围绕着“鲜活”“原味”“实惠”三个关键词。近年来&#xff0c;随着游客结构的变化——年轻群体、学生党、自驾家庭及宠物出行者…...

Arduino嵌入式SD卡逐行读取库ReadLines详解

1. 项目概述ReadLines 是一个专为 Arduino 平台设计的轻量级文件行读取库&#xff0c;核心目标是解决嵌入式系统中对 SD 卡文本文件进行逐行解析这一高频但易出错的操作需求。在资源受限的 MCU 环境下&#xff08;如 ESP8266、STM32F103C8T6、ATmega328P&#xff09;&#xff0…...

在CentOS上部署RustDesk私有中继服务器:从零搭建到安全配置

1. 环境准备&#xff1a;搭建RustDesk私有中继服务器的基石 在CentOS系统上部署RustDesk私有中继服务器&#xff0c;首先需要确保基础环境配置正确。我遇到过不少因为环境问题导致的部署失败案例&#xff0c;所以这部分我会详细说明每个环节的注意事项。 1.1 系统更新与基础依赖…...

L1-064 估值一亿的ai核心代码 (分数20)字符串处理

•无论用户说什么&#xff0c;首先把对方说的话在一行中原样打印出来&#xff1b;•消除原文中多余空格&#xff1a;把相邻单词间的多个空格换成 1 个空格&#xff0c;把行首尾的空格全部删掉&#xff0c;把标点符号前面的空格删掉&#xff1b; •把原文中所有大写英文字母变成…...

llama-index 数据清洗示例、数据清洗等

文章目录示例数据清洗常见的需要清洗的数据数据清洗知识llama的一小块功能&#xff0c;主文章内容太多了&#xff0c;拆出来单独说下。示例 环境还基于之前的环境。 1、新建python文件clean_demo.py&#xff0c;代码&#xff1a; import os from llama_index.core import Do…...

GitHub功能多元拓展,korb工具革新REWE购物流程

【导语&#xff1a;GitHub提供了涵盖AI代码创作、开发者工作流、应用程序安全等多方面的丰富功能&#xff0c;同时推出不同规模和用例的解决方案。而korb命令行工具则为REWE超市购物带来新体验&#xff0c;可实现自动化购物流程。】GitHub&#xff1a;功能全面的开发者平台GitH…...

VisionPro —— CogImageFileTool图像文件管理实战解析

1. CogImageFileTool核心功能解析 第一次接触CogImageFileTool时&#xff0c;我完全被它强大的图像管理能力震撼到了。这个工具就像工业视觉领域的"智能文件管家"&#xff0c;专门处理图像文件的读写和存储问题。想象一下&#xff0c;你每天要处理上千张生产线上的产…...

VisualGDB跨平台调试避坑指南:用VS远程调试Linux程序(2023最新版配置)

VisualGDB跨平台调试实战&#xff1a;2023年VS远程开发Linux程序避坑指南 当Visual Studio开发者首次尝试在Linux环境下进行C开发时&#xff0c;往往会面临调试工具链断裂的困境。传统的gdb命令行调试方式与Windows开发者熟悉的图形化调试体验存在巨大鸿沟&#xff0c;而Visual…...

KOReader 2025.04:重新定义电子墨水屏阅读

KOReader 2025.04&#xff1a;重新定义电子墨水屏阅读 【免费下载链接】koreader An ebook reader application supporting PDF, DjVu, EPUB, FB2 and many more formats, running on Cervantes, Kindle, Kobo, PocketBook and Android devices 项目地址: https://gitcode.co…...

NXP S32K3开发日记:PIT0的RTI唤醒功能调试全记录(含时钟源配置误区)

NXP S32K3开发实战&#xff1a;PIT0 RTI唤醒功能深度解析与排错指南 作为一名长期深耕汽车电子领域的嵌入式工程师&#xff0c;最近在基于NXP S32K3系列MCU开发低功耗应用时&#xff0c;遇到了一个颇具挑战性的问题——如何可靠地使用PIT0的RTI&#xff08;Real Time Interrupt…...