Vue风格指南 - v-if/v-else-if/v-else下的key

标签：star   .net   blank   vue   .com   app   class   head   默认事件   

没有在 v-if/v-if-else/v-else 中使用 key

^谨慎使用

如果一组 v-if + v-else 的元素类型相同，最好使用 key (比如两个 <div> 元素)。

默认情况下，Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同，则会出现意料之外的副作用。

如以下示例：在没有添加key属性的情况下，点击“Edit”也会触"submit"元素的默认事件

反例：

而添加不一样的key值就正常了。

正例：

Vue 风格指南：https://cn.vuejs.org/v2/style-guide/ 

Vue风格指南 - v-if/v-else-if/v-else下的key

标签：star   .net   blank   vue   .com   app   class   head   默认事件   

原文地址：https://www.cnblogs.com/mjian/p/9427664.html