v-for和v-if同时使用渲染两遍

于 2024-01-24 11:33:43 发布
阅读量771 收藏 7
点赞数 8
文章标签： 前端 javascript vue uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eren_yeger/article/details/135817943
版权
本文讲述了在使用Vue时，由于v-if和v-for的优先级不同可能导致数据重复循环的问题，作者建议通过调整模板结构，将v-if和v-for分别放在不同的层级，以避免此类问题。
摘要由CSDN通过智能技术生成

在今天写代码的时候，我发现明明数据只有两条，但是v-for却循环出来了四个，重复循环了

查了一下才发现是v-if和v-for的优先级不同，同时使用就会发生这样的情况

我们在使用的时候，如果同时使用，可以将两个分开，不在同一级

类似于

<view  v-if="isMobile">
	<view v-for="(item,index) in lists" :key="index">
    </view>
</view>

这样，就可以完美解决这个问题啦

_当时只道是寻常
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue - v-for 循环渲染多个 “重复“ 子组件（仅 ref 不同，this.$refs.xx 使用时依然能准确找到子组件）将子组件 ref 设为动态，这样每个子组件都是 “独立“ 的！详细教程
王佳斌
02-21 5606
vue 组件ref 怎么是变量，vue 组件的refs如何绑定变量，循环数组v-for中使用refs，Vue 父组件循环使用refs调用子组件方法，Vue ref 和 v-for 结合，vue 循环动态设置ref并获取$refs方式，vue中 $ref的使用(v-for组件内使用ref)，vue循环渲染子组件，vue如何让组件的ref变成动态的，vue怎么将循环体内插入子组件，vue把组件ref设为动态,然后用refs再找到，vue 动态赋值ref，vue同一个子组件循环出来如何使用，vue将子组件设置动态
vue踩坑之：v-for和v-if造成重复循环展示
xiaoyuer_2020的博客
12-31 4264
遇到的问题：接口只返回了一组数据，但是在页面展示时却出现了重复渲染，展示了两组商品。代码如下： <div v-if="type == 1" v-for="(item, index) in productList" :key="index">预售：{{item.name}}</div> <div v-else v-for="(item, index) in productList" :key="index">普通商品：{{item.name}}</div> .
vue中使用v-for实现两次嵌套循环，判断某子元素是否显示，进行复杂表单校验
最新发布
铁锤妹妹的博客
07-12 5763
有以下一个使用场景，名称111、名称222、名称333，是放在一个大数组里的，然后通过第一层for循环显示出来的。名称333数组里又包含自己的子数组，子数组再通过第二次for循环展示出来。当我们选择发放方式的时候，符合选择条件的只显示自己对应那一行的首发比例。最后对子数组里的每一项进行表单校验。
vue踩坑系列-v-for和v-if的重复循环
qq_19739063的博客
11-12 5545
遇到的问题是：   前端获取的数据是正确的，渲染传参也是正确的。但是在页面展示时却出现了重复渲染。代码如下： &lt;ul&gt; &lt;li v-for="(item, index) in data" :key="index" v-if="show"&gt; 111 &lt;/li&gt; &lt;li v-for="(item, index) in dat
Vue中v-if与v-for同时使用的影响和JavaScript中含对象的数组去重
前端卷王小白的博客
06-25 1167
vue,v-if,v-for,v-if和v-for同时使用的影响,含对象的数组去重
vue 使用 v-if 控制组件显示，组件注册监听事件多次执行
fk129
04-26 1443
在项目中遇到过这样的情况，组件里面注册了window监听事件，组件加载用v-if控制，第一遍加载操作是没有问题，但是在第二遍及之后的加载操作有点问题。window监听事件会触发多次 经过检查后发现，当操作完成组件用v-if控制不显示，但是window监听事件还存在并没有被注销，所以导致后面加载的组件操作会显示触发多次监听事件。 解决方法：在组件销毁的时候移除当前不需要的window监听事件 添加事件监听： window.addEventListener(event, function, tr.
解决v-for中使用v-if或者v-bind:class失效的问题
10-17
当`v-for`和`v-if`或`:class`一起使用时，可能出现的问题通常是由于Vue无法正确地监听到`v-for`循环内部的数据变化。在`v-for`循环内部，Vue会创建一系列的“派生”数据，这些数据并不是原始数据的一部分，因此Vue的...
在vue的v-for中使用索引index值
01-06
在Vue.js框架中，`v-for`指令是一个非常重要的特性，用于遍历数组或对象，渲染列表或重复的模板。当我们需要在`v-for`循环中跟踪每个项目的唯一标识或执行特定操作时，可以利用其提供的索引`index`值。下面我们将...
vue2和vue3的v-if与v-for优先级对比学习
10-14
在Vue 2.x中，如果在一个元素上同时使用v-if和v-for，v-for的优先级高于v-if，这意味着v-for会先执行，然后v-if再决定是否渲染结果。 然而，在Vue 3.x中，这种行为发生了变化。现在v-if的优先级高于v-for，这意味着...
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
在Vue.js中，`v-for`指令用于遍历数组或对象，生成一组DOM元素。它是一种非常强大的功能，常用于动态渲染...希望本文对理解和使用Vue中`v-for`循环列表控制按钮隐藏显示功能有所帮助，如果有更多问题，欢迎继续探讨。
解决vue的 v-for 循环中图片加载路径问题
10-18
在Vue.js应用中，`v-for`循环常用于渲染列表数据。然而，在处理图片加载时，尤其是在图片路径与数据动态绑定的情况下，可能会遇到一些问题。本文将深入探讨如何解决Vue的`v-for`循环中图片加载路径的问题。 首先，...
v-if 和v-for一起使用的弊端及解决办法?
a1324837的博客
06-01 1624
在 Vue.js 中，如果在同一个标签中同时使用了 v-for 和 v-if，可能会出现一些问题，例如：循环体内的条件语句会被重复执行，导致性能下降。如果数据列表比较大，则这种性能问题会变得更加明显。属性来控制进入和离开时的过渡效果，从而在渲染时减少无用的操作。希望这个回答对你有帮助，如果你有其他问题，请随时向我提出。条件语句会影响到整个循环的渲染，导致一些不必要的渲染。v2的v-for比v-if的优先级高。v3的v-if比v-for的优先级高。导致的性能问题以及其他问题。
v-if和v-for一起使用的弊端以及解决办法
beichen3997的博客
09-09 1603
由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。 解决办法：在v-for的外层或内层包裹一个元素来使用v-if ...
为什么v-if和v-for不建议同时使用
前端小菜鸟也有人起的博客
05-09 303
为什么v-if和v-for不建议同时使用
【uniapp】使用v-if的方式点击改变v-for列表中的单个样式
ONLYSRY的博客
08-25 1435
看代码：循环circleList列表生成一排div，使用v-if与v-else然不同条件进入不同的div中即可。控制台：非常简单点击事件时传入index就行了。JS部分：逻辑相当简单。
vue中v-if 不重新渲染组件的问题
weixin_48712091的博客
03-29 5201
自遇： tab切换，使用v-if，v-else来对自定义组件进行渲染，渲染的两个组件是一样的，但是数据，样式不同；v-if是根据tab切换的下标判断 结果： 只会渲染第一个，另一个切换后不渲染 原因： 可能是Vue识别到的是相似组件（高度相似甚至相同），所以就不会更新元素 方案： 使用key对两个组件进行标识 <组件 v-if="" :key="唯一标识"> <组件 v-else :key="唯一标识"> ...
vue重新渲染子组件
DDghost的博客
06-24 3987
在vue中，有时候我们需要重新渲染子组件，例如在本次earn-big-money项目中，问卷页面是一个子组件。当发布任务者发布了问卷，发布者在任务详情处需要查看不同人提交上来的问卷，由于问卷的内容在组件渲染之后就已经固定了，因此切换不同人的问卷重新加载渲染问卷组件。 在这里可以使用v-if。 <v-SurveyViewer v-if="loadSurvey"> </v-Surve...
v-if和v-for可以一起使用吗？哪个优先级比较高？有什么影响？
^_^
01-30 4328
v-for和v-if是可以一起使用的，：当同时使用时，v-if比v-for优先级更高。我们并不推荐在一元素上同时使用这两个指令。在外新包装一层再在其上使用v-for可以解决这个问题 (这也更加明显易读)：白话来说 先执行v-for 进行创建了多个dom元素，这时再去使用v-if 销毁了很多无用创建出来的的元素，非常浪费性能。总结：v-for和v-if可以同时使用，但不建议直接使用，如果想要使用有两种解决方案 一、在判断条件中不对循环数据作为条件的时候可以加一层 templa
v-if与v-for不能同时使用的原因及解决办法
qq_51196135的博客
04-28 2713
如果v-if与v-for在一个标签里同时使用，那么会报错； 理解：v-for 的优先级比 v-if 的高，如果灭一次都要遍历整个数组，将会影响速度，特别是当需要渲染小部分的时候；如果一起用，会把 v-if 给灭一个元素都添加一下，会造成性能问题。 解决方法： 1⃣️把 v-if 放在外层 用 空标签 <template> 来判断 或者 让 for 循环在template上： 2⃣️使用compted 先计算属性再去渲染模版； ...
v-for和v-if一起使用
05-11
在Vue中，我们可以使用v-for指令来循环渲染元素，使用v-if指令来控制元素的显示和隐藏。当需要同时使用v-for和v-if指令时，需要注意以下几点： 1. 在同一个元素上同时使用v-for和v-if指令时，v-for应该在v-if之前...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值