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. 计算机网络与因特网

相关内容

热门资讯

AI做攻略、“双向奔赴”……国... 本文转自：人民网人民网记者 许维娜今年国庆假期，AI（人工智能）成了不少年轻人的“旅行搭子”。行前做...
合肥的这个“梗”， 翻篇了 社交平台的评论区，曾长期流传一句专属于合肥的黑色幽默。有人问合肥哪里好玩，本地网友半开玩笑地回复：合...
7万+旅游中高层都在的群，今天... 做旅游这行，资源卡位、渠道互通、项目落地——往往就差一个“对的机会”。我们的行业社群已聚集70,00...
一场帐篷音乐节，如何让井研从“... 帐篷音乐节现场封面新闻记者 周洪攀10月的研溪湿地，晚风里裹着柑橘的清甜与民谣的回响。夜幕降临，10...
白鹤翩翩落星愿，上海迪士尼度假... 10月9日，世界候鸟日前夕，上海迪士尼度假区星愿公园的湖风里多了一分白鹤的灵动。三座白鹤雕塑正式揭幕...
成都锦江边赏初秋枫叶飘飘 目前，成都锦江边国华街枫叶树红了。近年来，国华街附近的几条街都栽种了红枫树，是城区较集中看枫叶的点位...
GBTA：商务旅行正在复苏，但... 亚太正在成为全球商务旅行增长的重要引擎。在经历疫情后的快速反弹之后，全球商务旅行正在进入一个新的增长...
从景区焕新到节赛引流 邹城双节... 齐鲁网·闪电新闻10月9日讯 中秋、国庆“双节”假期，邹城市文化和旅游局提前谋划、周密部署，立足自身...
江山如此多娇 且看石楼今朝 金秋十月，黄河岸畔秋意盎然，丰收盛会喜迎国庆。本次石楼国庆文旅活动以“江山如此多娇，且看石楼今朝”为...
海南国庆假期接待游客475.4... 2026年国庆假期，海南接待游客475.40万人次，较2025年增长13.1%，较2024年增长15...