vue v-for循环的用法

1、v-for循环普通数组

<1>创建vue对象

<script>
//创建 Vue实例，得到ViewMode1
var vm=new Vue({
el:'#app',
data:{
list:[1,2,3,4,5,6]
},
methods:{}
});
</script>

<2>循环数据

<div id="app">
    <p v-for="(item,i)" in list">索引值：{{i}}---每一项：{{item}}</p>
</div>

2、v-for循环对象数组

<1>创建vue实例对象

<script>

//创建Vue 实例,得到 ViewMode1
    var vm=new Vue({
     el:'#app',
     data:{
         list:{
             {id:1,name:'zs1'},
             {id:2,name:'zs2'},
             {id:3,name:'zs3'},
             {id:4,name:'zs4'}
          
           }
         },
        methods:{}
     })
</script>

<2>循环对象数组

<div id="app">
      <p v-for="(user,i) in list">Id:{{user.id}}--名字：{{user.name}}--索引：{{i}}</p>
</div>

3v-for循环对象

<1>创建vue对象实例

<script>
//创建Vue实例，得到ViewMode1
var vm=new Vue({
  el:'#app',
   data:{
        user:{
             id:1,
             name:'托尼',
             gender:'男'
          }
        },
        methods:{}
      });
<script>

<2>循环对象

<div id='app'>
      <p v-for="(val,key,i)in user">值是：{{val}}--键是：{{key}}--索引：{{i}}</p>
</div>

4v-for循环数字

<1>创建vue对象实例

注意：push()方法一般是添加到数组的最后的位置；unshift()方法是往最前面的位置添加。

<script>
       var vm=new Vue({
            el:"#app",
           data:{
               list:[
               {id:1,name:"q"},
               {id:2,name:"w"},
               {id:3,name:"e"},
            ],
            id:"",
            name:""
         },
          methods:{
              add(){
                  this.list.unshift({id:this.id,name:this.name})
                 }
             }
          })
</script>

<2>循环

注意：

    1 v-for循环的时候，key属性只能使用number或String

    2 key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值

    3在组件中使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须使用v-for的同时，指定·唯一的 字符串/数字  类型：key值

<div id="app">
        <div>
               <lable>
                    ID:<input type="text"  v-model="id"/>
               </lable>
               <lable>
                     Name:<input type="text"   v-model="name"/>
               </lable>
               <button @click="add">添加</button>
          </div>
          
          <p v-for="item in list"   v-bind:key="item.id">
                  <input  type="checkbox" name=""   id=""   value=""/>{{item.id}}:{{item.name}}
          </p>
        </div>