东莞证券官方网站,互联网产品推广是做什么的,广州做网站多,建设网站用什么时候开始先说结论#xff0c;推荐使用【:keyitem.id】而不是将数组下标当做唯一标识#xff0c;前者能做到全部复用 场景#xff1a;删除无序列表中的li标签 !DOCTYPE html
html langen
headmeta charsetUTF-8推荐使用【:keyitem.id】而不是将数组下标当做唯一标识前者能做到全部复用 场景删除无序列表中的li标签 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title创建一个Vue实例/titlescript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptlink hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.3.0-alpha1/dist/css/bootstrap.min.css relstylesheet integritysha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD crossoriginanonymousscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.3.0-alpha1/dist/js/bootstrap.bundle.min.js integritysha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim crossoriginanonymous/script
/head
bodydiv classcontainerdiv idapp!-- 事件做li标签的删除功能根据class的id删除此案例删除class3的标签--!-- 原代码 --li class11/lili class22/lili class33/lili class44/lili class55/li!-- 1.使用item.id做:key唯一标识符 --!-- 删除3后变成 --li class11/lili class22/lili class44/lili class55/li!-- vue开始将剩下的四个li与源代码的五个li进行匹配使用的是diff算法对比新旧虚拟DOM由于精准删除3,1和2直接代码复用4和5发现class和内容均能匹配上将class重新排列 1234则映射出新的组合如下--li class11/lili class22/lili class34/lili class45/li
!-- --!-- 2.使用index做:key唯一标识符 --!-- 删除3后index数组下标会发生改变变成 --li class11/lili class22/lili class34/lili class45/li!-- Vue将内容为4的li与内容为3的对比发现匹配不上删除3标签再将内容为5的li与内容为4的对比也匹配不上又删除4标签 --
!-- --!-- 总结使用index很多情况不能代码复用强制更新元素影响性能 --/div/divscriptconst app new Vue({el: #app,data:{},methods:{}})/script
/body/html
