v-for

<div id="message">
<div>
  <span v-for="n in 10">{{ n }} </span>
</div>//取整数---------------------------------1
  <div v-for='item in items'>
    {{item.name}}
    {{item.age}}
  </div>
  <div v-for="(item,index) in items">
    {{index}}//支持索引------------------------2
  </div>
  <div v-for="it in its">
    {{it}}//对象迭代---------------------------3
  </div>
  <div v-for="(value, key,index) in its">
    {{key}}-{{value}}-{{index}}//对象迭代---键值对+索引-------4
  </div>
</div>
···
new Vue({
  el:'#message',
  date:{
    its:{name:"w",age:"10"},
    items:[{name:"w",age:"10"},{name:"o",age:"15"}],//一个数组对应元素  
}
})

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ,但它的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值.建议尽可能使用 v-for 来提供 key ,除非迭代 DOM 内容足够简单,或者你是故意要依赖于默认行为来获得性能提升。因为它是 Vue 识别节点的一个通用机制, key 并不特别与 v-for 关联,key 还具有其他用途,我们将在后面的指南中看到其他用途。

这是因为我们用v-for的时候 在vue组件上面使用的 这个时候 我们需要给它加上 :key=“xxx”

一个独一无二的表示来表示它的唯一性

<router-link v-for="n in 100" :key="n"></router-link>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容