for根据ID去重_Vue中的v-for踩坑之旅(继上一章key的案例)

for根据ID去重_Vue中的v-for踩坑之旅(继上一章key的案例)_第1张图片

用过Vue的同学都知道,v-for指令常用于遍历数组或者对象,然后依次渲染出指定的内容。同时,我们也知道,官方文档也建议,在使用v-for指令时,记得要加上key属性,方便提升应用性能。例如一个简单的增删Todo应用如下所示:

for根据ID去重_Vue中的v-for踩坑之旅(继上一章key的案例)_第2张图片

代码很简单明了,也运行的很高效。我们用了v-for指令,也加了key, 一切都和完美,感叹Vue真好用,真是高效哇!

组件封装

在Vue中,官方建议我们多进行组件封装和抽象,这样方便后期维护。因为每一个Todo都有自己的状态,例如完成或者未完成, 我们需要将每一个Todo抽象为组件。所以我们要做一下简单的改进:新建一个TodoItem.vue,然后在主文件中导入使用

你可能感兴趣的:(for根据ID去重,vue,key重复,vue,判断同一数组内的值是否一直)