现在接着来扯v-for指令
v-for顾名思义，和java中的for指令一个用法，该指令用来循环遍历一个数组
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
废话不多说，直接上代码：
<html>
<head>
<meta charset="utf-8">
<title>Vue 之v-for学习</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ol> <！--有序列表-->
<li v-for="site in sites"> <!--循环条件，sites在data中定义了，site为sites数组中各元素的别名（别名可以任意取）-->
姓名：{{ site.name }} 年龄: {{ site.age }} <!--name和age在data中的sites数组中定义-->
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [ //json格式
{ name: 'Runoob', age: 22 },
{ name: 'Google', age: 21 },
{ name: 'Taobao', age: 23 }
]
}
})
</script>
</body>
</html>输出：
如上图，v-for实现了将data中的sites数组进行了遍历。
相信聪明的你已经学会了v-for的用法，嘿嘿嘿！！！
原创不易，转载请注明出处：https://blog.csdn.net/Kermit_father
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
