九、列表渲染v-for的使用

1、v-for指令，基于一个数组来渲染一个列表。（也可以基于一个对象）   

      （注意：指令v-for，也可以被template标签使用）

2、v-for指令，需要使用（item,index）in items 形式的特殊语法。其中

       1>items 是源数据数组。

       2>item  是被迭代的数组元素的别名。

       3>index 是索引。

     或者 （value,key,index）in obj 形式的特殊语法。其中

       1> obj 是源数据对象。

       2> key  是被迭代的对象属性名，value 是被迭代的对象属性值。

       3> index 是索引。

3、v-for中 key属性的使用

       1> key属性值的类型只能是string或number，主要用在Vue的虚拟DOM算法，在新旧nodes对比辩识Nodes。

       2> 如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。

          而使用key时，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。

       3> 相同父元素的子元素key值必须唯一不能重复，重复的key会造成渲染错误。

4、当使用v-for遍历数组时，如果没有指定key，当数组元素顺序发生变更时，DOM绑定的数据会更新，而DOM本身的顺序不会变化。

       如果指定了key，当数组元素顺序发生变更时，DOM会和数据同步更新。

<template v-if='false'><!--5、没有指定key的话，首先给列表的第一个数据项羊肉串打✓，再点击添加按钮-->
    <div v-for='(item,index) in list'><!--发现新添加的数据项，出现在原列表羊肉串数据项的前面，即索引位置不变，索引的内容改变了-->
        <label>                       <!--而打√的依旧是列表第一个索引的复选框。-->
            <input type="checkbox">{{item.title}}
        </label>
    </div>
    <button type="button" v-on:click='add()'>添加</button>
</template>
<template><!--5、指定key的话，索引位置不变，索引内容也不变。也就是说，key是一个不能动态变化的唯一值，类似id-->
    <div v-for='(item,index) in list' :key='item.id'><!--key绑定的可以是: 1、数据唯一值id，一般这个id可以通过ajax从后台接口中的数据拿到-->
        <label>                                                     <!--2、自己做一个时间戳赋值给key,只要key值不一样就行-->
            <input type="checkbox">{{item.title}}                   <!--3、循环嵌套时候，可设置为对应级别的index索引-->
        </label>
    </div>
    <button type="button" v-on:click='add()'>添加</button>
</template>

<script>
let data={
    list:[
        {id:1,title:'羊肉串',price:2}, //5、key绑定的是数据唯一值id，一般这个id可以通过ajax从后台接口中的数据拿到
        {id:2,title:'啤酒',price:4},
        {id:3,title:'花毛一体',price:10}
    ],
};
methods:{
    add(){
        this.list.unshift( {id:4,title:'土豆片',price:2},);//5、key绑定的是数据唯一值id，一般这个id可以通过ajax从后台接口中的数据拿到
    }
}
</script>

5、Vue实例的set()方法，检测数据更新即监听属性值变化，解决数据更新，不能即时渲染到视图中的问题。

比如，数据对象中的某个数据（特指数组里的数据）变化了，但是刷新页面，发现视图相关数据无法更新（这个问题不是100%会发生的，为了兼容性，一定要在代码后面加Vue实例的set()方法）

<script>
let data={
    list:[
        {id:1,title:'羊肉串',price:2},
        {id:2,title:'啤酒',price:4},
        {id:3,title:'花毛一体',price:10}
    ],     
};

vue.$data.list[1].price=14;
//4、Vue实例的set()方法，检测数据更新即监听属性值变化，解决数据更新，不能即时渲染到视图中的问题。
/*
**第一个参数：要更新的数据源、对象或数组。
**第二个参数：key或是索引。
**第三个参数：要赋的值。
*/
vue.set(vue.$data.list,1,vue.$data.list[1]);//在改变数据对象某个数据的代码后面，紧跟这个方法，才能起作用。
//this.$set(this.list,1,this.list[1]);//当this指向Vue实例时候，也可以这样写。
</script>