v-for循环语句

循环语句
循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

数组遍历来渲染列表
在html中：

<div id="app" style="margin-top:100px;">
        <h1>v-for 循环语句</h1>
        <!-- 数组遍历 -->
        <ul>
            <li v-for = "site in sites">
                {{site.name}} - {{site.age}}
            </li>
        </ul> 
</div>

在JS：

new Vue({
           el:'#app',
           data:{
               sites:[
                   {name:"Henny",age:18},
                   {name:"Jacky",age:20},
                   {name:"lucy",age:22}
               ]
           }
       })

得到的结果：

另外也可以为数组索引指定别名 (或者用于对象的键)：

<ul>
            <li v-for = "(site,index) in sites">
                {{index}}:{{site.name}} - {{site.age}}
            </li>
        </ul>

在template模板中使用v-for

在html中：

<div id="app" style="margin-top:100px;">
        <h1>v-for 循环语句</h1>
        <ul>
       <template v-for = "(site,index) in sites">
           <li> {{index}}:{{site.name}} - {{site.age}} </li>
       </template>
    </ul>
</div>

得到的结果：

template是不会占用html的位置，所以很适合当渲染模板来使用

v-for也能对一个对象进行遍历
在html中：

<div id="app" style="margin-top:100px;">
        <h1>v-for 循环语句</h1>
           <template v-for="(site,index) in sites">
                <div v-for = "(val,key) in site">
                    <p>{{key}} - {{val}}</p>
                </div>
           </template>
        
    </div>

在JS：

new Vue({
           el:'#app',
           data:{
               sites:[
                   {name:"Henny",age:18},
                   {name:"Jacky",age:20},
                   {name:"lucy",age:22}
               ]
           }
       })

得到的结果：