Vue中v-for不能与v-if一起写的原因
迪丽瓦拉
2025-06-01 00:23:32
0次

v-for指令用于循环渲染一个列表 ， v-if用于根据条件动态地渲染元素

这两个指令都是vue中最为常见的指令，但是他们不可以放在一起使用，原因是 v-for的优先级高于 v-if

举个例子就是：

我们这么写的本意，其实是想做到，如果 show为false，我们不展示列表。如果show为true，我们循环渲染list列表。
但如果将v-for和v-if放在一起，其实等价于 依次渲染了6个div，每一个里面都添加了v-if判断
//等价于下面的形式

1


2


3


4


5


6
也就是在每一次的循环中，都会进行v-if的判断，这个是非常耗费性能的，大量的判断会极大降低项目质量，所以vue官方在风格指南中极为不推荐甚至不让你放在一起写

但是实际开发中，一定会遇到这种类似场景的，就是 要根据条件来进行循环渲染，这种要怎么解决呢？

方法一：

在v-if不依赖于v-for的前提下，直接将v-if移到外层，既然v-for的优先级高于v-if，那我将v-if放到最外层首先进行判断不就可以了嘛

方法二：

在上面的例子中， v-if是靠data数据里的show变量来控制是否展示的，即并不依赖于v-for的某个值。

那假如，我需要根据v-for的index值（或item值）来控制是否展示呢？

即，v-if的判断条件需要依赖于v-for的某个值（item，index）

对于这种情况，我们可以把list替换为一个计算属性 list_filter，让其返回一个过滤后的列表
好处是：
1、过滤后的列表只会在 list 数组发生相关变化时才被重新运算，过滤更高效。
2、解耦渲染层的逻辑，可维护性 (对逻辑的更改和扩展) 更强。
词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：中国人工智能企业CIMCAI世界港航人工智能垂直领域领军者，成熟智慧港航产品数字化航运自动化港口中国人工智能企业顶尖港航AI科技

下一篇：《计算机网络-自顶向下》01. 计算机网络与因特网

相关内容

热门资讯

linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作： 我们首先创建了一个文件并在这个文件里面添加了...
C++ 机房预约系统（六）：学... 8、 学生模块 8.1 学生子菜单、登录和注销 实现步骤： 在Student.cpp的...
A.机器学习入门算法（三）：基... 机器学习算法（三）：K近邻(k-nearest neigh...
数字温湿度传感器DHT11模块... 模块实例https://blog.csdn.net/qq_38393591/article/deta...
有限元三角形单元的等效节点力 文章目录前言一、重新复习一下有限元三角形单元的理论1、三角形单元的形函数（Nÿ...
Redis 所有支持的数据结构... Redis 是一种开源的基于键值对存储的 NoSQL 数据库，支持多种数据结构。以下是...
win下pytorch安装—c... 安装目录一、cuda安装1.1、cuda版本选择1.2、下载安装二、cudnn安装三、pytorch...
MySQL基础-多表查询 文章目录MySQL基础-多表查询一、案例及引入1、基础概念2、笛卡尔积的理解二、多表查询的分类1、等...
keil调试专题篇 调试的前提是需要连接调试器比如STLINK。 然后点击菜单或者快捷图标均可进入调试模式。 如果前面...
MATLAB | 全网最详细网... 一篇超超超长，超超超全面网络图绘制教程，本篇基本能讲清楚所有绘制要点&#...
IHome主页 - 让你的浏览... 随着互联网的发展，人们越来越离不开浏览器了。每天上班、学习、娱乐，浏览器...
TCP 协议 一、TCP 协议概念 TCP即传输控制协议（Transmission Control ...
营业执照的经营范围有哪些 营业执照的经营范围有哪些 经营范围是指企业可以从事的生产经营与服务项目，是进行公司注册...
C++ 可变体(variant... 一、可变体(variant) 基础用法 Union的问题： 无法知道当前使用的类型是什...
血压计语音芯片，电子医疗设备声... 语音电子血压计是带有语音提示功能的电子血压计，测量前至测量结果全程语音播报࿰...
MySQL OCP888题解0... 文章目录1、原题1.1、英文原题1.2、答案2、题目解析2.1、题干解析2.2、选项解析3、知识点3...
【2023-Pytorch-检... （肆十二想说的一些话）Yolo这个系列我们已经更新了大概一年的时间，现在基本的流程也走走通了，包含数...
实战项目：保险行业用户分类 这里写目录标题1、项目介绍1.1 行业背景1.2 数据介绍2、代码实现导入数据探索数据处理列标签名异...
记录--我在前端干工地(thr... 这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前段时间接触了Th...
43 openEuler搭建A... 文章目录43 openEuler搭建Apache服务器-配置文件说明和管理模块43.1 配置文件说明...