Vue2.0中v-for迭代语法变化（key、index）

最新推荐文章于 2024-07-18 18:59:22 发布
最新推荐文章于 2024-07-18 18:59:22 发布
阅读量5.4w 收藏 8
点赞数 2
分类专栏： 前端学习之路 文章标签： vue-js js 框架 模板
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_35512245/article/details/53966788
版权

今天，在写关于Vue2.0的代码中发现 $key这个值并不能渲染成功，问题如下：

这里写图片描述

结果这个对象的key值并不能够显示：

这里写图片描述

后来查阅了文档才知道，这是因为在Vue2.0中，v-for迭代语法已经发生了变化：

丢弃了:

这里写图片描述

新数组语法
value in arr
(value, index) in arr

新对象语法
value in obj (value, key) in obj
(value, key, index) in obj

解决后：

这里写图片描述

这里写图片描述

qinjianhuang
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
Custom elements in iteration require ‘v-bind:key‘ directives vue/valid-v-for解决方案
qwe122343的博客
07-01 4231
最近在使用 iView 组件库进行开发，在使用 Select 选择器 时出现问题，为什么使用模板会报错呢？ error ： Custom elements in iteration require ‘v-bind:key’ directives vue/valid-v-for 原因出在 template 里 模板语句是： <i-option v-for="item in classList" :value="item.value">{{ item.label }}</i-option&
vue2之v-for详解
amyleeYMY的博客
12-10 8500
了解vue的应该都知道v-for指令是用来遍历 数组、对象的，但是vue居然还能遍历整数！！！第一眼看到遍历v-for整数的代码我觉得是写错了。。。好吧，是我太菜了。接下来我们一起来看看。 （1）遍历数组 &lt;ul id="example-1"&gt; &lt;li v-for="(item, index) in items" :key="index"&gt; {{ item...
【Vue】深入了解 v-for 指令：从基础到高级应用的全面指南
最新发布
lph159的博客
07-18 961
v-for是 Vue.js 提供的一个用于遍历数组和对象的指令。它可以帮助我们在模板中动态生成列表项。其语法简洁明了，非常适合在 Vue.js 中进行列表渲染。
为什么vue2使用v-for时不要用index作为key?(diff算法)
qq_21890655的博客
06-08 119
diff算法是一种通过同层的树节点进行比较的高效算法比较只会在同层级进行, 不会跨层级比较。在 比较的过程中，循环从两边向中间比较 判断是否是同一个节点github: vuejs/vue@2.6.14 sameVnode 函数使用到的工具类 patchVnode github: vuejs/vue@2.6.14 patchVnode updateChildren github: vuejs/vue@2.6.14 updateChil...
深入剖析Vue中v-for的使用及index作为key的弊端
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
11-17 855
我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名，v-for 也支持使用可选的第二个参数表示当前项的位置索引。
Vue运行报错：Custom elements in iteration require ‘v-bind:key‘ directives.eslintvue/valid-v-for
klipol的博客
02-02 4602
Vue运行报错：Custom elements in iteration require 'v-bind:key' directives.eslintvue/valid-v-for
浅谈Vue2.0中v-for迭代语法的变化(key、index)
08-27
在Vue2.0中，`v-for`指令的迭代语法相比Vue1.x做了一些重要的调整，这些变化影响了如何在循环中处理数组和对象。本文将深入探讨这些变化，特别是涉及`key`和`index`的用法。 首先，让我们回顾一下Vue1.x中的`v-for`...
在vue中,v-for的索引index在html中的使用方法
08-27
在Vue.js中，`v-for`指令是一种非常重要的特性，用于循环遍历数组或对象，渲染列表、表格等数据集合。在使用`v-for`时，我们可以为每个迭代的元素提供一个唯一的索引`index`，这个索引在HTML模板中可以发挥多种作用...
VUE中v-model和v-for指令详解
08-30
VUE中v-model和v-for指令详解 在 Vue 中，v-model 和 v-for 是两个非常重要的指令，它们分别用于实现数据双向绑定和列表渲染。下面我们将详细介绍这两个指令的使用和实现原理。 v-model 指令 v-model 指令是 ...
在vue的v-for中使用索引index值
01-06
在vue的v-for中使用索引index值
Vue报错Custom elements in iteration require ‘v-bind:key‘ directives.“错误解决
月来better
06-25 1165
报错提示明确要求绑定key值，那么加上绑定key值即可
记Vue报错Custom elements in iteration require ‘v-bind:key‘ directives.“错误解决
xiangyizhixuexi的博客
07-01 1877
在使用v-for时会出现v-for报错 [vue/valid-v-for]Custom elements in iteration require ‘v-bind:key’ directives.eslint-plugin-vue 解决方法则是加入key属性即可： <swiper-item v-for = "item in banner" :key="item.label"> 加入key属性之后则可以正常运行 第二种解决方法： 找到 文件->首选项->设置 里面输入：ve
vue-v-for遍历index与id
m0_64081601的博客
03-29 846
当添加一个新的数据时，会生成新的数据段，然后生成新的虚拟DOM，这时就会使用虚拟DOM对比算法用新的虚拟DOM和旧的虚拟DOM进行对比。如果key相同的话，比较其他的一样不一样，若一样将旧虚拟DOM中映射出来的真实DOM的值进行复用，反之直接写入新的真实DOM之中。紧接着Vue就会根据新的数据生成新的虚拟DOM，然后新的虚拟DOM就会去和旧的虚拟DOM进行diff(虚拟DOM对比算法)如果key一样的话，进行其他的对比，一样的可以进行再次的复用，使用id作为key，保证了key的唯一性，防止数据错乱。
vue的 v-for指令报“custom elements in iteration require v-bind:key“错误
冲出仁川，走出马德里，故事还会再继续
08-07 2512
文章目录1、问题描述2、解决方案： 1、问题描述 今天再用v-for指令进行遍历的时候出现custom elements in iteration require v-bind:key错误。 2、解决方案： 为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为列表的每一项提供一个唯一key属性。key属性的类型只能是string或number。 例如我修改之后的代码如下： <el-timeline-item :timestamp="blog.created" plac
在Vue中获取v-for的index值
Tiger_Paul的博客
02-19 6962
<el-submenu :index="item.id+''" v-for="(item,index) in menuList" :key="item.id"> <template slot="title"> <i :class="icons[index]"></i> <span>{{item.authName}}</span> </template> data() { return { ic.
vue v-for index下标中文网挖的坑
u011120573的博客
04-18 7927
https://cn.vuejs.org/v2/guide/list.html#基本用法 官网把index参数写反了 ul id="example-2"> li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} li>ul> 应该是 li v-fo
v-for=“(item, index) in arr“ :key=“index“
weixin_57396733的博客
05-09 1778
在下面的函数中，想要得到v-for="(item, index) in arr" :key="index"中的index,通过传参得到，不能直接在函数内部访问到
v-for 循环 index的传值问题？
weixin_33691700的博客
01-04 1971
&lt;el-submenu :index="index" v-for="(item,index) in menuList"&gt; &lt;el-menu-item :index="index" v-for="(subItem,subindex) in item.subMenuList"&gt; {{inde...
Vue基础：v-for遍历与模板语法详解
本资源主要介绍了Vue框架中的模板语法（二），着重讲解了v-for指令在列表渲染中的关键应用。在 Vue 开发中，v-for是一个强大且常用的指令，用于遍历数组或对象中的元素，从而动态生成UI。以下是关键知识点的详细阐述...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qinjianhuang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值