vue 中$index $key 已经移除了
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 已经移除了的更多相关文章
- vue + element 动态渲染、移除表单并添加验证
博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...
- React/Vue里的key到底有什么用?看完这篇你就知道了!(附demo代码)
网上有很多博客讲到,React.Vue里的key,与 Virtual DOM 及 DOM diff 有关, 可以用来唯一标识DOM节点,提高diff效率,云云. 这大致是对的,但是,大多讲得语焉不详, ...
- vue中使用key管理可复用的元素
1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...
- vue.set( target, key, value ) this.$set(对象获数组,要更改的具体数据,重新赋值)用法
调用方法:Vue.set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值 具体用法js代码: //设 ...
- VUE温习:内存泄漏、Vue.$set、key作用与虚拟diff算法
一.内存泄漏 1.指令绑定了事件,却没有解绑事件,容易产生内存泄漏.(曾经遇到过的案例) 2.v-if指令产生内存泄漏,比如v-if删除了父级元素,却没有删除父级元素里的dom片段 3.跳转到别的路由 ...
- vue中:key 和react 中key={} 的作用,以及ref的特性?
vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...
- 为什么要使用Vue.$set(target,key,value)
vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2,数组通过索引值修改内容 vm.arr[1] = 'aa' Vue.$set(target,key, ...
- vue $index,$key已经移除了
之前可以这样: <ul id="example"> <li v-for="item in items"> {{$index}} {{$k ...
- Vue中的$set的使用
在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新 ...
随机推荐
- python 循环类型
循环: while死循环: important time while 1== 1 print('ok') #当1==1条件成立时,会一直循环输出ok. 因为条件永远成立,所以是死循环 ...
- 手机缺失sqlite3时操作数据库的多种解决方案 ----adb命令科普
在Android应用开发无处不在SQLite数据库的身影.那么在开发中怎么使用adb命令操作数据库的功能呢? 下面我们将完整的介绍与数据库操作相关的命令集及当手机缺少sqlite3的时候的多种解决方案 ...
- express --- session详解
之前一直做前端相关的工作,所以不太清楚session,也没有主动了解,最近在学node,对session的认识又有所加深,故总结之. 注: 关于session的一些配置问题,可以看这里. 第一部分: ...
- Spring Boot实战(3) Spring高级话题
1. Spring Aware Spring的依赖注入的最大亮点就是你所有的Bean对Spring容器的存在是没有意识的.即你可以将你的容器替换成别的容器. 实际项目中,不可避免地会用到Spring容 ...
- 【Iperf】iperf测试wlan的性能
1.概念: iperf命令是一个网络性能测试工具.iperf可以测试TCP和UDP带宽质量. iperf可以测量最大TCP带宽,具有多种参数和UDP特性.iperf可以报告带宽,延迟抖动和数据包丢失. ...
- python面试题——前端(23题)
2.谈谈你对websocket协议的认识. 3.什么是magic string ? 4.如何创建响应式布局? 5.你曾经使用过哪些前端框架? 6.什么是ajax请求?并使用jQuery和XMLHttp ...
- web项目无法被Eclipse的Tomcat识别的解决办法
Eclipse 导入外部项目无法识别为web项目并且无法在部署到tomcat下 1.进入项目目录,找到 .project 文件: 2.找到 <natures> 代码段,在里面加入如下标签内 ...
- python--Time(时间)模块
要使用一个模块,首先要把模块导入进来 import time 我们先把这一篇文章需要用的模块导入进来 首先说一下time模块,time模块中的函数 --sleep:休眠指定的秒数(可以是小数) imp ...
- 关于Android Studio中的一个小问题——R文件引用Id失败
错误情况: 今天使用AS建立了一个新的EmptyProject,结果出现错误 setContentView(R.layout.activity_main); R文件的引用Id失败.真的是莫名奇妙... ...
- c++ 处理utf-8字符串
c++的字符串中的每一个元素都是一个字节.所以在装入utf8字符串的时候,其实是按照一定的规则编码的. 字符的8位中 如果0开头 则自己就是一个单位. 1字节 0xxxxxxx 2字节 110xxx ...