v-for 指令

JS部分：

 var app = new Vue({
           el: "#app",
           data() {
               return {
                   list: [1, 2, 3, 4],
                   objList: [
                       { id: 1, name: 'Tome' },
                       { id: 2, name: 'Jack' },
                       { id: 3, name: 'France' },
                   ],
                   obj: { id: 1, name: 'checky', gender: 'mele', age: 18 }
               }
           }
 });

一、循环数组

 <ul>
      <li v-for="item in list">
           {{item}}
       </li>
  </ul>

结果：

二、循环对象数组

 <ul>
     <li v-for="(obj,i) in objList">
          {{obj.id}} - {{obj.name}} - {{i}}
      </li>
 </ul>            

结果：

三、遍历对象

 <!-- 在便利对象的键值对时，有val、key、index -->
 <p v-for="(value,key,index) in obj">
      {{index}}:{{key}} : {{value}}
 </p>

结果：

四、迭代数字

 <!-- 用v-for迭代数字，count从1开始 -->
 <p v-for="count in 10"> 这是第几次{{count}}此循环</p>

结果：

五、v-for中key使用，key可以保证数据唯一标识不被改变

JS部分：

 var app = new Vue({
     el: "#app",
     data() {
         return {
             id: "",
             name: "",
             users: [
                 { id: 1, name: '张三' },
                 { id: 2, name: '李四' },
                 { id: 3, name: '王五' },
             ]
         }
     },
     methods: {
         add() {
             this.users.push({ id: this.id, name: this.name });
         }
     }
 });

HTML部分：

 <div>id:<input type="text" v-model="id" /> name: <input type="text" v-model="name"> <button type="button"
         @click="add">添加</button></div>
 <p v-for="user in users">
     <label><input type="radio" />id:{{user.id}} name:{{user.name}}</label>
 </p>

页面：

现在如果新添加一条数据id=4，name=XXX，显示结果如下：

每个用户的id没有改变，当我们改变一下add()的方法，如下：

 add() {
     this.users.unshift({ id: this.id, name: this.name }); # 改变了列表添加的方式，在头部新加一个
 }

现在选中李四的勾选框

同样新增一条数据id=4，name=XXX的数据。

由图发现，勾选的李四，新加一条数据后，变成勾选张三了，这时候就需要用到key了，在循环的p标签上加个key属性，然后指定:key=user.id：

 <p v-for="user in users" :key="user.id">
     <label><input type="radio"/>id:{{user.id}} name:{{user.name}}</label>
 </p>

同样选中李四，再添加一条数据，结果如下，被勾选中的还是李四：

这样就将数据和p标签唯一绑定了。