https://cn.vuejs.org/v2/guide/migration.html#index-and-key-移除

之前可以这样:

1
2
3
4
5
6
<ul id="example">
    <li v-for="item in items">
        {{$index}}
        {{$key}}
    </li>
</ul>

现在已经移除,如果还用的话就会报错:Uncaught ReferenceError: $index is not defined;

现在这样写:

1
2
3
4
5
6
<ul id="example">
    <li v-for="(item,index) in items">
        {{item}}
        {{index}}
    </li>
</ul>

第一个参数是值,第二个参数是索引;目的是为了保持和原生的一致;

官方文档如是说:

$index and $key 移除

已经移除了 $index 和 $key 这两个隐式声明变量,以便在 v-for 中显式定义。这可以使没有太多 Vue 开发经验的开发者更好地阅读代码,并且在处理嵌套循环时也能产生更清晰的行为。

升级方式

在代码库中运行迁移工具来找出使用这些移除变量的示例。如果你没有找到,也可以在控制台错误中查找(例如 Uncaught ReferenceError: $index is not defined)。

vue 中$index $key 已经移除了的更多相关文章

  1. vue + element 动态渲染、移除表单并添加验证

    博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...

  2. React/Vue里的key到底有什么用?看完这篇你就知道了!(附demo代码)

    网上有很多博客讲到,React.Vue里的key,与 Virtual DOM 及 DOM diff 有关, 可以用来唯一标识DOM节点,提高diff效率,云云. 这大致是对的,但是,大多讲得语焉不详, ...

  3. vue中使用key管理可复用的元素

    1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...

  4. vue.set( target, key, value ) this.$set(对象获数组,要更改的具体数据,重新赋值)用法

    调用方法:Vue.set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值 具体用法js代码: //设 ...

  5. VUE温习:内存泄漏、Vue.$set、key作用与虚拟diff算法

    一.内存泄漏 1.指令绑定了事件,却没有解绑事件,容易产生内存泄漏.(曾经遇到过的案例) 2.v-if指令产生内存泄漏,比如v-if删除了父级元素,却没有删除父级元素里的dom片段 3.跳转到别的路由 ...

  6. vue中:key 和react 中key={} 的作用,以及ref的特性?

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

  7. 为什么要使用Vue.$set(target,key,value)

    vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2,数组通过索引值修改内容 vm.arr[1] = 'aa' Vue.$set(target,key, ...

  8. vue $index,$key已经移除了

    之前可以这样: <ul id="example"> <li v-for="item in items"> {{$index}} {{$k ...

  9. Vue中的$set的使用

    在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新 ...

随机推荐

  1. java——最大堆 MaxHeap

    使用数组来实现最大堆 堆是平衡二叉树 import Date_pacage.Array; public class MaxHeap<E extends Comparable <E>& ...

  2. my.资料_副本_破六欲

    http://www.nok2.com/fxjy/816.html 梦幻之家礼包网讲解梦幻2破除心魔 来源:www.nok2.com作者:礼包达人时间:2016-04-01 22:11 最近听到不少小 ...

  3. Linpack之HPL测试

    平台信息 Description: CentOS Linux release 7.6.1810 (Core) 注意事项 安装HPL之前需要配置好: GCC/Fortran77 编译器 BLAS/CBL ...

  4. Android NDK开发 Android Studio使用新的Gradle构建工具配置NDK环境(一)

    本文主要讲述了如何如何在Android Studio使用新的Gradle构建工具配置NDK环境,现在把相关的步骤整理出来分享给Android程序员兄弟们,希望给他们在配置NDK环境时带来帮助. 从An ...

  5. java 各进程功能java,javac,javaw,javaws,javap

    javac 代码编译成字节码 javap字节码解析成代码 java.exe用于启动window console  控制台程序 javaw.exe用于启动 GUI程序 javaws.exe用于web程序 ...

  6. Day3监督学习——决策树原理

    Day3 机器学习监督学习——决策树原理 一.决策树的原理 1.机器学习中分类和预测算法的评估: 准确率 速度 强壮型:有数据缺失或错误时算法的运行 可规模性:数量级规模比较大 可解释性 2.决策树( ...

  7. 【小程序报错】 TLS 版本必须大于等于 1.2

    服务器是windows 2008 server 环境是IIS7SSL是申请用的阿里免费.微信小程序发现wx.request,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 直接说解决办法吧 ...

  8. Redis数据类型之散列类型hash

    在redis中用的最多的就是hash和string类型. 问题 假设有User对象以JSON序列化的形式存储到redis中, User对象有id.username.password.age.name等 ...

  9. web项目无法被Eclipse的Tomcat识别的解决办法

    Eclipse 导入外部项目无法识别为web项目并且无法在部署到tomcat下 1.进入项目目录,找到 .project 文件: 2.找到 <natures> 代码段,在里面加入如下标签内 ...

  10. SSL--Windows下生成OpenSSL自签证书

    :OPenSSL下载地址:https://www.openssl.org/source/ 编译好的OpenSSL下载地址: http://slproweb.com/products/Win32Open ...