Vue 前端开发 v-for和v-if两个指令不能混合使用

已于 2024-03-03 15:28:05 修改
阅读量261 收藏
点赞数
分类专栏： VUE 文章标签： vue.js 前端 javascript
于 2024-03-03 14:15:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangguoqing_it/article/details/136431147
版权

原由：

在进行项目开发的时候因为在一个标签上同时使用了v-for和v-if两个指令导致的报错。

提示错误：The 'undefined' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'

 原因：v-for的优先级会高于v-if，因此v-if会重复运行在每个v-for中。

正确写法：使用template标签进行包裹(template为html5的新标签，无特殊含义)

 

 注意点：key值写在包裹的元素中

王stone
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端程序员需要了解的Vue知识
qq_45163356的博客
05-07 1880
前言：这一篇旨在教大家快速入门Vue2，每个知识点用案例解释 一：声明式渲染 vue是单页面应用，一个vue应用直接挂载到一个dom元素上，其余的都创建在vue的实例里面 文本插值{{}}，里面可以做字符串拼接，js逻辑运算 <h1>{{ data + 1 }}</h1> <h1>{{ data + '1' }}</h1> <h1>{{ `${data}1` }}</h1> <h1&gt
vue的注意规范之v-if 与 v-for 一起使用教程
10-16
主要介绍了vue的注意规范之v-if 与 v-for 一起使用方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
前端面试题----------------------Vue
lmk666__的博客
06-26 617
vue面试题
Vue入门介绍及简单使用_模板语法_指令-v-xxx_样式控制-style和class
qq_31455841的博客
12-14 213
Vue 入门 1. 前端目前形式 # 前端发展阶段 1. html5,css3,js(es5,es6) 写一个一个的页面 => 给后端（php，python，go，java） => 后端嵌入模板语法 => 后端渲染完 => 返回给前端 => 在浏览器中看 2. ajax出现 =>
VUE day_01(7.15) vue的入门---使用vue脚本可以实现的一些功能
m0_70328115的博客
07-22 804
插值语法、属性绑定语法、事件绑定语法、计数器、事件参数、显示与隐藏、html与text、v-once、v-if、v-for、安装脚手架并生成项目包
前端面试题-vue篇
m0_61811926的博客
01-09 1260
vue前端面试题-不断更新中~已有130题
VUE v-for指令
HelloWord176的博客
06-04 735
v-for指令： 作用: v-for 是一个循环指令,可以循环数组 对象 已经字符串； 一、循环数组： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" con...
vue 中v-for 提示错误的解决办法
小米粒的博客
03-23 9870
错误如下： 解决方法： 想渲染一下item 和index 通过 :key=“item” 结果如下： index还是报错 有了如下解决： 将 :key=“item” 改为:key="index"，问题解决 ...
vue中 v-for 报错
wuxueru100200的博客
04-22 942
一. vue中 v-for 报错 1.[ vue warn ]Avoid using non-primitive value as key, use string/number value instead.（避免使用非原始值作为关键字，而使用字符串/数字值代替） 解决：key绑定的值不要是对象，最好是唯一字符串或数字 2.[ vue warn ]Duplicate keys detected: ‘[object Object]’. This may cause an update error. 解决
vue基础2--vue基础API
咖啡壶的博客
12-04 565
vue基础api的使用介绍
vue2和vue3的v-if与v-for优先级对比学习
01-18
Vue.js 中使用最多的两个指令就是 v-if 和 v-for ，因此我们可能会想要同时使用它们。虽然官方不建议这样做，但有时确实是必须的，我们来了解下他们的工作方式： 在 vue 2.x 中，在一个元素上同时使用 v-if 和 v-...
Vue中的v-for指令不起效果的解决方法
10-17
今天小编就为大家分享一篇Vue中的v-for指令不起效果的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中使用v-for时为什么不能用index作为key
10-15
主要介绍了vue中使用v-for时为什么不能用index作为key，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前端面试题总结-VUE
weixin_43299180的博客
04-08 476
vue 除了内置指令之外，还允许用户自定义指令来进行扩展，指令的目的在于将操作 dom 的逻辑进行复用；1、指令的生命周期bind：只调用一次，指令第一次绑定到元素上调用；执行一些初始化操作；inserted：绑定指令的节点插入到页面中（仅保证父节点存在，但不一定已被插入文档中）；update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前；指令的值可能发生了改变，也可能没有；componentUpdate：指令所在的节点及其子节点的Vnode 全部更新后调用。
【前端 VUE 框架】vue002---Vue插值语法：文本指令、事件指令、属性指令、style和class的使用、条件渲染、列表渲染
初遇我ㄖ寸の热情呢？
09-23 59
/ class_obj: {red: true, be_bold: false} //对象形式 js里面键可以不加引号、be-bold有中横线，写成驼峰形式。// class_obj:["red",] //数组形式，使用push（Python中的append）追加多个样式，同时使用 推荐使用。// style_class: [{background:"red"}, {fontSize:'30px'}], // 数组。// class_obj:"red" //字符串形式。//就是对这个变量取反，！
没时间学 Vue (7) —— 渲染（二）：条件渲染 v-if
可乐天尊@小七星球
03-31 392
上一篇说了列表渲染 v-for，本篇继续讲渲染中的 条件渲染 v-if 。 Vue 官方的说明在：https://cn.vuejs.org/v2/guide/conditional.html。 1、v-if 条件渲染，顾名思义，就是 “在某种条件下才渲染” 以及 “在其他条件下不渲染” —— 典型的 if-else 场景。 比如说，登录到某个系统的时候，可以按照 “账户 + 密码” 的方式登录，也可以按照 “电话号码 + 验证码” 的方式的登录。 简易版的画面效果，大概是这样的：（没用 C..
Vue3选项式和组合式生命周期说明
最新发布
weixin_44072254的博客
05-16 401
setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。
前端Vue架构
weixin_45678402的博客
05-12 294
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
Vue中v-if和v-for为什么不能同时使用
07-25
在Vue中，v-if和v-for不能同时使用在同一个元素上的原因是为了避免出现不必要的性能问题。 当v-if和v-for同时存在于同一个元素时，Vue会先根据v-if的条件判断来决定是否渲染该元素。如果条件为真，则进一步使用v-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值