v-for就是平時的for迴圈

html

   <!--vue-app是根容器-->
    <div id="vue-app">
        <p>第一個陣列</p>
        <ul>
            <li v-for="name in names">{{ name }}</li>
        </ul>
        <p>第二個陣列</p>
        <ul>
            <li>第一種輸出方法</li>
            <li v-for="info in infos">{{ info.name }}---{{ info.age }}</li>
            <li>第二種輸出方法</li>
            <li v-for="(info,index) in infos">{{ index }}.{{ info.name }}---{{ info.age }}</li>
        </ul>
    </div>
 

JS

//例項化vue物件
new Vue({
    el:"#vue-app",
    data: {
        names: ["hw", "zs", "ls"],
        infos: [
            {"name":"hw","age":18},
            {"name":"zs","age":23},
            {"name":"ls","age":32}
        ]
    },
    methods:{},
    computed:{}
});

效果圖：

優化  v-for 輸出資料 ，可以使用<template>  進行渲染

簡單的來說，就是為 v-for 提供一個 輸出 的空盒子，當內容輸出完後，盒子就會撤銷，並不會顯示出來

html

    <!--vue-app是根容器-->
    <div id="vue-app">
        <template v-for="(info ,index) in infos">
            <h3>{{ index }}.{{ info.name }}</h3>
            <p>age:{{ info.age }}</p>
        </template>
    </div>
 

JS

//例項化vue物件
new Vue({
    el:"#vue-app",
    data: {
        infos: [
            {"name":"hw","age":18},
            {"name":"zs","age":23},
            {"name":"ls","age":32}
        ]
    },
    methods:{},
    computed:{}
});

輸出效果圖(與下面的v-10效果圖對比下，就明白了)：

v-for巢狀使用

html

    <!--vue-app是根容器-->
    <div id="vue-app">
        <div v-for="(info ,index) in infos">
          <div v-for="(a , b) in info">
              <p>{{ b }}:{{ a }}</p>
          </div>

        </div>
    </div>

JS

//例項化vue物件
new Vue({
    el:"#vue-app",
    data: {
        infos: [
            {"name":"hw","age":18},
            {"name":"zs","age":23},
            {"name":"ls","age":32}
        ]
    },
    methods:{},
    computed:{}
});

效果圖：

                                                                (v-10)