vue列表渲染指令v-for

1.v-for:列表渲染指令，循环遍历输出，通过数据中的数组或者对象有选择性地实现对列表内容(绑定了v-for指令标签的内容)的渲染。

v-for需要以item in items的特殊语法存在，其中items是源数组或对象名，item是数组成员或对象成员；使用v-for遍历数组时，还可以使用可选地选择第二个参数作为当前项的索引。

使用v-for遍历对象时，可写三个参数，分别为value、key、index,后两个参数是可选的。

2.key属性作用和使用原理：

1)key 在这里是一个通过 v-bind 绑定的特殊 attribute。请不要和v-for使用对象里所提到的对象属性名相混淆

2)key 这个特殊的 attribute 主要作为 Vue 的虚拟 DOM 算法提示，在比较新旧节点列表时用于识别 vnode。

3)在没有 key 的情况下，Vue 将使用一种最小化元素移动的算法，并尽可能地就地更新/复用相同类型的元素。如果传了 key，则将根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素。

注意：同一个父元素下的子元素必须具有唯一的 key。重复的 key 将会导致渲染异常。

4）:key=" x ",其中x最好写数据中数组或者对象的id值而非index值，因为当被v-for渲染的列表进行增删改动态操作时，index值即数组索引是动态变化的，而id值是固定不变的，所以当id值作为x写入新数据时列表会因为key值的不同重新渲染，而不是像index值那样因为索引值随着数据的变化导致旧的数据元素和新的数据元素由于有的地方key相同发生数据复用的情况。

3.示例：

<template>
     <div id="app" style="width:400px;height:400px">
       <ul style="border:2px solid skyblue">
        <button @click="add">添加</button>&emsp;<button @click="lower">删除</button>
          <li v-for="(item,index) in lists" :key="item.id">
                {{ index }}<br/>&emsp;
            &emsp;<input type="checkbox"><br/>
               {{ item. school}}————{{ item.id }}
               {{ item.position }}<br/><br/>
               
          </li>
          </ul>
     </div>
</template>
<script>
    export default{
         data(){
          return{
           lists:[
          {
            id:'001',school:'湖南科技大学',position:'湖南湘潭' 
          },
          {
            id:'002',school:'湖南农业大学',position:'湖南长沙'
          },{
            id:'003',school:'湖南工业大学',position:'湖南株洲'
          }
        ]
         }
        },
        methods:{
          add(){
            this.lists.push({id:'004',school:'湖南工商大学',position:'湖南长沙'});
          },
          lower(){
            this.lists.splice(this.lists.length-1,1);
          }
        }
    }
</script>
<style scoped>

</style>

4.常见的列表渲染过程中数组操作用到的方法：