v-for 的四种使用方法

  //v-for的四种使用方法分别是：
  //1.使用v-for循环一个简单的数组
 //2.使用v-for循环一个复杂的数组
 //3.使用v-for循环对象
 //4.v-for循环一个迭代的数字
<div>
       <p v-for="item in list">{{item}}</p>
           <P v-for="(item ,i) in list">索引值：{{i}}---每一项：{{item}}</P>
           <!--v-for循环一个复杂的数组-->
           <p v-for="(item,i) in list1">索引值：{{i}}--id：{{item.userid}}---姓名：{{item.username}}</p>
           <!--v-for循环一个对象-->
           <p v-for="(val,key,i) in list2">id：{{val}},name:{{key}},index:{{i}}</p>
           <!--v-for 循环一个迭代数字-->
           <p v-for="count in 10">这是第{{count}}次循环</p>
<div>

v-for中key的使用注意项
v-for在循环时，key属性只能使用number获取string
key在使用时只能使用v-bind的属性绑定的形式，指定key的值
在组件中使用v-for的时候，或者在一些特殊的时候v-for使用有问题的时候
必须在使用v-for的同时指定唯一的字符或者number类型：key值

  <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>
           
           <p v-for="item in list3" :key="item">
            <input type="checkbox"> 
            {{item.id}}------
            {{item.name}}
          </p>
        </div>
    <div id="app1">
        <p v-for="(val,key,i) in user ">userid:{{val}}---username:{{key}}---index:{{i}}</p>

    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                list:[1,2,3,4,5,6,7,8],
                list1:[
                    { userid:1,username:'zs1'},
                    { userid:2,username:'zs2'},
                    { userid:3,username:'zs3'},
                    { userid:4,username:'zs4'}
                ],
                list2:{
                    id:1232,
                    name:'托尼.琼斯',
                    gender:'female'
                },
                list3:[
                    {id:1,name:'项羽'},
                    {id:2,name:'刘备'},
                    {id:3,name:'诸葛亮'},
                    {id:4,name:'曹操'},
                    {id:5,name:'赵子龙'},
                ]
         },
            methods:{
                add(){
                   // this.list3.push({id:this.id,name:this.name});
                   this.list3.unshift({id:this.id,name:this.name});   
                }

            }
        });  
    </script>