第五天Vue学习

v-for的相关使用

1.v-for的基本使用

循环遍历,值,索引值,key都可以

 一般需要使用索引值。

  • { {index+":"+item}}
  • index表示索引,item表示当前遍历的元素。

    { {item}}

    { {key+'----'+i}}

    2.v-for对key的使用

    使用key可以提高效率,加key如果要插入x使用diff算法高效,如果使用index做key一直变,所以item如果唯一可以使用item。

    不加key渲染时候会依次替换渲染,加了key会直接将其放在指定位置,加key提升效率。

    没有key的添加就相当于直接在当前位置改变添加的字符串后,后面的所有元素都会一个一个的改变,下面的数据都会变。而不是利用vue的复用性直接调用,,这样会对运行效率有影响

    { {item}}

    3.v-for循环的key的原理

    以此为案例,当文本框内写入内容后,在进行点击添加会是文本框内部的内容发生错乱

    所以需要加入key来解决相关问题

    不添加key的结果,value中的内容收到影响,若是从尾部添加没有问题 即便添加了:key="index"也不行,这个没有根本解决key的问题 ,也可以说因为复用性,所以在替换时index没有唯一性,索引值被直接改变,后面带有的value会直接复用,导致添加的新的文本框内容与开始的第一行一致。

    • { {item.name}}

    你可能感兴趣的:(vue.js,学习,elementui)