Vue3下v-for和v-if在同一个元素上使用导致v-if失效

左手的ㄟ右手 2024-04-23 12:43 25阅读 0赞

## 问题现象 ##

我在HBuilderX下写一个uni-app应用，用的Vue3版本，在某个元素下同时使用了v-for和v-if，运行到微信开发者工具，发现v-if这个条件判断不起作用。

从manifest.json文件的基础配置可以看到，用的是Vue3：  
![在这里插入图片描述][8ea250d878784d1097b99a9c5130fb8a.png]

代码片段如下，在view元素上同时使用了v-for和v-if：  
![在这里插入图片描述][1d4cd00ebbe04e63b4d1563b6bf51da4.png]

运行到微信开发者工具，发现v-if条件过滤没有起作用，因为本意是要将圈出来的图过滤掉，不显示，但现在显示出来了：  
![在这里插入图片描述][f6da530045694716a33f3f3c57a91d6e.png]

## 问题原因 ##

[https://cn.vuejs.org/guide/essentials/list.html\#v-for-with-v-if][https_cn.vuejs.org_guide_essentials_list.html_v-for-with-v-if]

**当v-for和v-if同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：**  
![在这里插入图片描述][b95c2191826b4cdeb596e6cea83921e2.png]

**所以官网给出的建议：同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。**

## 解决方法 ##

### 方法一：在v-for修饰的元素的子元素上使用v-if ###

v-for和v-if不要同时作用在一个元素上，可以在v-for修饰的元素的子元素上使用v-if，例如：  
![在这里插入图片描述][c3f83aeea81a4fb59f9159ae6a7567ca.png]

### 方法二：将v-if改为v-show，这样就可以作用在同一个元素上 ###

将v-if改为v-show，这样就可以作用在同一个元素上，例如：  
![在这里插入图片描述][b996484bf2584bae91754a4da75ca2e3.png]

### 方法三：使用Vue2版本，这样v-for和v-if就可以作用在同一个元素上 ###

使用Vue2版本，这样v-for和v-if就可以作用在同一个元素上。可以在manifest.json文件的基础配置中修改Vue的版本：  
![在这里插入图片描述][c613947b05184b799442e1b7450903f3.png]

v-for和v-if作用在同一个元素上：  
![在这里插入图片描述][978d62007ae74e1ab8a2961e37eb945f.png]

[8ea250d878784d1097b99a9c5130fb8a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/5400fa748e5a4312a7a78d0c2f861e17.png
[1d4cd00ebbe04e63b4d1563b6bf51da4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/deaab399b53f4261bbe2ca2a299b7c6e.png
[f6da530045694716a33f3f3c57a91d6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/d4ac76c4e1a04df4897cdca7a53b557a.png
[https_cn.vuejs.org_guide_essentials_list.html_v-for-with-v-if]: https://cn.vuejs.org/guide/essentials/list.html#v-for-with-v-if
[b95c2191826b4cdeb596e6cea83921e2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/e57bc4d526a74d4db512b8045a98dad2.png
[c3f83aeea81a4fb59f9159ae6a7567ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/5fd86a2c7cc24533ad50c058181fc669.png
[b996484bf2584bae91754a4da75ca2e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/cf8dccba75854395b1e7869a42714890.png
[c613947b05184b799442e1b7450903f3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/fa0aefe85b404de0a80214b708900a8b.png
[978d62007ae74e1ab8a2961e37eb945f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/dc20970d665a44c5b5fe7174ebeb0d4a.png