v-for 指令（列表渲染）

list是数组

<div id="app">
   <div v-for="item in list">{{item}}</div>
 </div>
 
 <script>let app = new Vue({
    el:"#app",
    data:{
        list:['Tom','John','Lisa']
    }
 });</script>

vue.js之v-for_v-for

v-for 还支持一个可选的第二个参数为当前项的索引。

<div id="app">
  <div v-for="(item,index) in list">{{index}}.{{item}}</div>
</div>

<script>let app = new Vue({
    el: "#app",
    data: {
      list: ['Tom', 'John', 'Lisa']
    }
  });</script>

vue.js之v-for_数组_02

list是对象

<div id="app">
  <div v-for="item in list">{{item}}</div>
</div>

<script>let app = new Vue({
    el: "#app",
    data: {
      list: {
        name:"Tom",
        age:20,
        sex:"man"
      }
    }
  });</script>

vue.js之v-for_vue-js_03

第二个参数为键名：

<div id="app">
  <div v-for="(item,key) in list">{{key}}:{{item}}</div>
</div>

<script>let app = new Vue({
    el: "#app",
    data: {
      list: {
        name:"Tom",
        age:20,
        sex:"man"
      }
    }
  });</script>

vue.js之v-for_v-for_04

第三个参数为索引：

<div id="app">
  <div v-for="(item,key,index) in list">{{ index }}.{{key}}:{{item}}</div>
</div>

<script>let app = new Vue({
    el: "#app",
    data: {
      list: {
        name:"Tom",
        age:20,
        sex:"man"
      }
    }
  });</script>

vue.js之v-for_数组_05