vue---列表渲染（v-for）

1、v-for是把一个数组映射成一组元素，可以用v-for指令基于一个数组来渲染一个列表，v-for需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。（可以理解为，item是数组内的每一个元素，items是数组的名字）

<template>
    <div class="hello">
        <ul>
            <li v-for="item in newlist">
                   {{item.title}}//页面中显示hello1、hello2、hello3
            </li>
        </ul>
    </div>
</template>

<script>
    export default{
        name:'HelloWorld',
        data(){
            return{
            newlist:[
                {
                  id:1,
                  title:"hello1"
                 },
                {
                  id:2,
                  title:"hello2"
                },
                {
                  id:3,
                  title:"hello3"
                }
      ]
    }
  }
}
</script>

2、此时是含有数组项三个，如果此时在进行添加一个数组项或者是数据项的顺序被改变，只需要重新渲染改变的就可以了，可以看出性能也是提高的，不必全部进行渲染，也就是“就地更新”策略。

3、那么为了给Vue一个提示，以便于它能够跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的key属性。此时就可以把上方我们写的代码变一下：

<li v-for="item in newlist" :key="item.id">
        {{item.title}}
</li>

因为id是唯一的，所以通过id来看哪个数据项发生了变化，发生变化的重新进行渲染。

4、但是可能数据项没有唯一的id,此时需要写成：

<li v-for="(item,index) in newlist" :key="index">
        {{item.title}}
</li>

① item代表数组内的每一条数据。

② index代表每一条数据的下标，数组的下标是唯一的。