这里强调结果,然后通过程序去验证结果的重要性,这里所有发现的原理都视为重要点
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
网友评论