vue 提供了 v-for 指令,用来辅助开发者基于一个数组来循环渲染相似的 UI 结构。 v-for 指令需要使用 item in items 的特殊语法,其中, items 是待循环的数组, item 是当前的循环项。v-for 指令还支持一个可选的第二个参数,即当前项的索引。语法格式为 (item, index) in items。
当列表的数据变化时,默认情况下,vue 会尽可能的复用已存在的 DOM 元素,从而提升渲染的性能。但这种默认的性能优化策略,会导致有状态的列表无法被正确更新。为了给 vue 一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列表被正确更新的前提下,提升渲染的性能。此时,需要为每项提供一个唯一的 key 属性:
① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性(即:key 的值不能重复)
③ 建议把数据项 id 属性的值作为 key 的值(因为 id 属性的值具有唯一性)
④ 使用 index 的值当作 key 的值没有任何意义(因为 index 的值不具有唯一性)
⑤ 建议使用 v-for 指令时一定要指定 key 的值(既提升性能、又防止列表状态紊乱)

其中需要注意必须加key这个值,否则会报Elements in iteration expect to have 'v-bind:key' directives的错误

举个栗子

<template>
  <div id="app">
      <ul>
        <li v-for="(user, i) in list" :key="i">id{{user.id}} 索引是:{{i}},姓名是:{{user.name}}</li>
      </ul>
    </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      list: [
            { id: 1, name: 'jenny' },
            { id: 2, name: 'danny' },
          ],
    }
  },
  methods:{
  }
}
</script>

在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐