30-指令v-for补充

这里强调结果,然后通过程序去验证结果的重要性,这里所有发现的原理都视为重要点

v-key前.gif

v-key后.gif

https://cn.vuejs.org/v2/guide/list.html#key

0.重要点

虚拟DOM
我们发现在客户端的界面上添加Vue中的数据,只会在该客户端看到数据的修改,但是我们的html文件并没有被修改;
这是因为为了保护我们的文件中的数据不被JS修改,浏览器在加载页面时,创建了一个虚拟DOM,所有的交互都是基于虚拟DOM,并不是实际的html文件

一.注意点

通过.prevent修饰符阻止默认行为

二.结果

在企业开发中,尽量给所有通过v-for渲染出来的元素添加key自定义属性,赋予唯一的id(整数)

三.问题

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。
--------官网

简单的说,就是确保已经被渲染的元素只更改数据,不更改其它

image.png

此时添加复选框的是赵,不是原来的钱

四.解决方法

给每个li添加自定义属性key,试其中html元素绑定在一起,不能轻易复用

五.测试代码

image.png

image.png

改进后

image.png