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标签唯一绑定了。