vue 的v-for 循环

v-for

1、普通数组
<p v-for="v in list">{{ v }}</p>
<p v-for="(v,k) in list">索引值：{{k}} 数值：{{ v }}</p>

2、索引数组
<p v-for="(v,k) in list2">id值{{ v.id }}=>{{ v.name }}</p>

3、对象数组
<p v-for="(val,key,i) in user ">{{key}}=》{{ val }} 下标{{i}}</p>
4、使用v-for 迭代数字
<p v-for='count in 10'> 这是第{{ count }} 次循环</p>
《-注意：如果使用 v-for 迭代数字的话 前面的count 值从1开始-》
<script>
    //创建Vue实例
    var vm = new Vue({
        el:'#app',
        data:{
            list:[1,2,3,4,5,6],
            list2:[
                {id:001,name:'red'},
                {id:002,name:'green'},
                {id:003,name:'blue'},
            ],
            user:{
                id:1,
                name : '托尼，仕达克',
                sex:'32',
            }
        },
        methods:{
        }
    })
</script>

5.在组件中使用v-for时，key现在是必须的
当Vue.js用v-for正在更新已渲染过的元素列表时，她默认用“就地复用策略”
vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素。
为了给Vue一个提示，以便她能跟踪每个节点的身份，从而重用和重新排序现有元素
<div id="app">
    <div>
        <label >Id:
            <input type="text" v-model="id">
        </label>
        <label >Name:
            <input type="text" v-model="name">
        </label>

        <input type="button" value="添加" @click="add">
    </div>
    <!--注意：v-for循环的时候 key 属性只能使用 number 或 string-->
    <!--注意：key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定key的值-->
    <!--在组建使用v-for循环的时候或者在一些特殊情况中，如果 v-for 有问题，必须在使用
    v-for的同时，指定唯一的字符串/数字类型 :key 值-->
    <p v-for="item in list2" :key="item.id">
        <input type="checkbox">
        {{item.name}}
    </p>
</div>
<script>
    //创建Vue实例
    var vm = new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            list2:[
                {id:001,name:'李斯'},
                {id:002,name:'始皇帝'},
                {id:003,name:'赵高'},
                {id:004,name:'韩非子'},
                {id:005,name:'荀子'},
            ],
        },
        methods:{
            add(){
                this.list2.unshift({id:this.id,name:this.name})
            }
        }
    })
</script>