v-for(item in listArray):key="val"中key值的作用:

  • 比如在id为5的对象上选中,如果没有指定(绑定)Key值,浏览器会记住这组数据的它的索引位置
  • 数据顺序一旦发生改变,选中项就会出现Bug(追加还好,索引不变,在前面追加就会改变数据顺序,索引改变,选中项也会发生变化)
  • Key值是每一项的唯一性的标志,数据顺序发生变化,浏览器会根据Key值渲染对应的原来的样式和状态
  • Key:值类型:–字符串-Number (不能是对象)
  • 设置好Key值,索引值虽然变化了,但是选中项(原有状态)依然不变
  • <p v-for="(item,i) in plist" :key="item.id"> {{item.id}}----{{item.name}}----{{i}}</p> 循环的数据不能让索引Index开头即本实例中不能让i开头,不然key值不生效(让name和id开头都可以,一定要是对象内的属性)。

         //删除它们最前面的一项,改变原有选中项的索引位置,如果不指定key,浏览器会自动匹配新索引项
              this.plist.shift();

//--------
   <p v-for="(item,i) in plist" :key="item.id">
            <!--设置好Key值,索引值虽然变化了,但是选中项(原有状态)依然不变-->
            <input type="checkbox"></input>
            {{item.id}}----{{item.name}}----{{i}}</p>
Logo

前往低代码交流专区

更多推荐