vue同时应用v-if和v-for，数据重复引用的问题

最新推荐文章于 2024-07-25 19:21:29 发布
最新推荐文章于 2024-07-25 19:21:29 发布
阅读量5k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33335751/article/details/80321789
版权

遇到问题时的代码是这样的


页面效果是


重复了三次数据，检测了一下，获取数据是没有重复，赋值给data也没有重复，就算是页面的dom已经重复了，data里面的数据也是没有重复的，经过一系列趟坑改代码，发现这样没问题了


然后再进行深入的查资料，初步判定是v-if和v-for的优先级的原因，所以再次优化代码


完美解决问题，嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻

wings军
关注
vue.js v-for嵌套 + v-if
唯你_
12-11 4307
在开发权限控制过程中，需求嵌套多层 v-for ，并且需要 v-if 判断是否需要显示标签（前端使用layui），直接代码如下： html代码： <ul id="app-4" class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="layadmin-system-side-menu"> &lt...
vue 为什么Vue中 v-if 和 v-for不能在一起用？解读其中原理
qq_34167295的博客
04-11 259
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回。作用在不同标签时候，是先进行判断，再进行列表的渲染。模板编译的时候，会将指令系统转化成可执行的。如果条件出现在循环内部，可通过计算属性。的列表渲染函数，函数内部都会进行一次。指令基于一个数组来渲染一个列表。是源数据数组或者对象，而。则是被迭代的数组元素的别名。提前过滤掉那些不需要显示的项。形式的特殊语法，其中。模板指令的代码都会生成在。值是独一无二的，这便于。这时候我们可以看到，
Vue3：当v-if和v-for同时使用时产生的问题和解决办法
最新发布
m0_58403721的博客
07-25 823
Vue3中v-if和v-for同时使用的弊端及解决办法 Property "***" was accessed during render but is not defined on instance.
Vue嵌套循环渲染与条件渲染--v-for|v-if
随便写写
12-16 3788
分析接口返回数据结构 data对象下有9个键值对 值 分别有数组类型,Object类,和null 数组类型Array下,存有若干个对象,每个对象有若干个值 现 遍历所有键值 , 并将null替换为"暂无" 大致效果 实例代码 <div id="app"> <div v-for="(item,key) in data_" :key="key"> <!-- <div class="key">第一层:{{key}}===={
for里面调用方法 vue_vue.js v-for每次循环两条项目，里面的处理函数会出现重复调用的问题...
weixin_39627661的博客
12-20 527
<script>let count = 3let indexArr = []export default {name: 'reportPage',data () {return {tdata: [1,2,3],myForm: {'myCompany': '海南凯迪网络资讯股份有限公司','myTips': ''},totalPage: 4,}},mounted () {let that...
vue中使用v-for实现两次嵌套循环，判断某子元素是否显示，进行复杂表单校验
铁锤妹妹的博客
07-12 6293
有以下一个使用场景，名称111、名称222、名称333，是放在一个大数组里的，然后通过第一层for循环显示出来的。名称333数组里又包含自己的子数组，子数组再通过第二次for循环展示出来。当我们选择发放方式的时候，符合选择条件的只显示自己对应那一行的首发比例。最后对子数组里的每一项进行表单校验。
01-引入vuejs、v-指令、计算属性computed和观察者watch、表单、v-show、v-if
code_li的博客
03-07 1095
vuejs2 官方文档 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 sublime text3 安装vue插件 ...
vue的render函数用法
lucky_ly的博客
10-19 3500
1.render简介 前面我们的组件的模板都是在模板里写的(template),模板最后都会被vue编译成virtual dom（虚拟dom），在某些情况下模板可能不好用，例如需要实现一个动态的文章标题，根据父组件的level属性，动态的渲染成h1~hx标签，用模板写部分代码如下。 <article-header :level="1">Hello world</article-h...
Vue初级
XiehaiyanLI的博客
06-28 616
Vue 初级 大纲知识点： Vue指令 Vue 基本属性 Vue组件通信 ##SPA和MPA区别及优缺点 SPA（单页面应用） SPA（ Single-page Application ）只有一个html页面，所有跳转方式都是通过组件切换完成的。 优点： 1.用户体验好，流畅。 2.因为是单页面，所以对服务器的压力较小。 3.可以在页面切换的时候增加一些炫酷的动画效果。 4.代码的可复用，且由于是组件化开发，有利于后期的维护。 缺点： 1.页面复杂度变大，开发难度较大。 2.不利于SEO 3.首次加载的
前端框架-Vue
AyinMars的博客
03-25 6293
Vue Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管理：vuex Vue-UI : ICE , Element UI 1 前端核心分析 1、VUE 概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。 与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 6939
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
vue for循环带label的input，多触发一次change事件的解决方案
天蚕土豆丝的博客
10-22 1499
for循环一个列表，列表中有上传图片组件时，点击一个上传组件，上传完图片后，change事件触发两次。 <li v-for="(item, index) in list" :key="index"> <div> <div>1</div> <div>2</div> <div style="position:relative;"> <labe
vue 绑定v-for 循环内部的值
一直很安静
03-20 2331
&lt;template **v-show="addresses.length &gt; 0"**&gt; &lt;li class="market-adress-wrap fl" **v-for="(item,index) in addresses" :key="index"**&gt; &lt;input **v-model="addres
vue踩坑之：v-for和v-if造成重复循环展示
xiaoyuer_2020的博客
12-31 4370
遇到的问题：接口只返回了一组数据，但是在页面展示时却出现了重复渲染，展示了两组商品。代码如下： <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> .
v-if 与v-for能一起使用吗
luxu714的博客
07-14 2271
1.能，两个指令不在同一标签中就可以使用。 2.不能，当v-if 和v-for在一个标签中时就不能使用了。 3.完美条件下，在div外层使用v-if 内层使用v-for。 注：v-if控制元素的创建与移除，v-for，注意key属性书写。 ...
v-if 和v-for的联合使用规则
大剑师兰特的GIS世界
02-09 2464
v-if和v-for是Vue.js中非常强大的指令，它们可以帮助开发者轻松地实现条件渲染和列表渲染。然而，正确地使用这两个指令是非常重要的，因为它们的性能影响可能会很大。通过遵循上述规则和最佳实践，我们可以确保我们的Vue应用既高效又易于维护。
Vue中v-if与v-for是否能同时使用？
weixin_65945235的博客
11-12 4231
不推荐在同一标签中使用根据官方文档的说明：当两个指令在同一标签中使用时在vue2中由于v-for的优先级高于v-if指令，所以如果同时使用可能会导致渲染不完全 注：vue3中v-if的优先级高于v-for（与vue2相反）
v-if和v-for一起使用的几个方法
wusq的博客
09-24 5588
方法一（推荐）： 不带if <ul> <li v-for="(item, index) in list" :key="index" > {{ item.title }} </li> </ul> 带if <ul v-for="(item, index) in list" :key="index"> <li v-if=...
v-if和v-for一起使用
11-30 1323
vue2.x 中v-for优先级高于v-if，vue3.x 相反 尽量避免在同一个元素上面同时使用v-if和v-for，建议使用计算属性替代 1、选择性地渲染列表，例如根据某个特定属性来决定是否渲染，使用计算属性computed： <div class="list" v-for="(item, index) in finishList" :key="index" > <div class="name">{{ item.corpName }}&l
vue2中v-if和v-for优先级
02-02
这意味着，如果一个元素上同时存在v-if和v-for指令，Vue会先根据v-for指令生成对应的循环列表，然后再根据v-if的条件进行筛选。这样可以确保只有满足v-if条件的项才会被渲染到页面上。 下面是一个示例代码，用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值