列表渲染

完整vue列表渲染 Vue官方文档小白教程网：列表渲染

key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input> 中的输入内容，<switch> 的选中状态），需要使用 :key 来指定列表中项目的唯一的标识符。

:key 的值以两种形式提供

l  使用 v-for 循环 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

l  使用 v-for 循环中 item 本身，这时需要 item 本身是一个唯一的字符串或者数字

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 :key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

示例

小白教程网www.2d5.net

：

<template>
    <view>
        <!-- array 中 item 的某个 property -->
        <view v-for="(item,index) in objectArray" :key="item.id">
            {{index +':'+ item.name}}
        </view>
        <!-- item 本身是一个唯一的字符串或者数字时，可以使用 item 本身 -->
        <view v-for="(item,index) in stringArray" :key="item">
            {{index +':'+ item}}
        </view>
    </view>
</template>
<script>
export default {
  data () {
    return {
      objectArray:[{
          id:0,
          name:'li ming'
      },{
          id:1,
          name:'wang peng'
      }],
      stringArray:['a','b','c']
    }
  }
}
 
</script>

注意事项

l  在H5平台 使用 v-for 循环整数时和其他平台存在差异，如 v-for="(item, index) in 10" 中，在H5平台 item 从 1 开始，其他平台 item 从 0 开始，可使用第二个参数 index 来保持一致。

l  在非H5平台 循环对象时不支持第三个参数，如 v-for="(value, name, index) in object" 中，index 参数是不支持的。