金灿灿的朝晖，渐渐染红了东方的天际，高高的黄山主峰被灿烂的云霞染成一片绯红。太阳在朝霞的迎接中，露出了红彤彤的面庞，霎时，万道金光透过树梢给水面染上了一层胭脂红。
我们可以用 v-for 指令基于一个数组or对象来渲染一个列表，有五种使用方法，如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<script>
Vue.config.productionTip=false;
Vue.config.devtools=false;
</script>
<div id="app">
<p v-for="item in items">{{item}}</p> <!--数组格式一，渲染结果:<p>11</p><p>12</p> -->
<p v-for="(item,index) in items">{{index}}->{{item}}</p> <!--数组格式二，渲染结果:<p>0->11</p><p>1->12</p>-->
<p v-for="item in infos">{{item}}</p> <!--对象格式一，渲染结果:<p>gege</p><p>12</p>-->
<p v-for="(item,key) in infos">{{key}}:{{item}}</p> <!--对象格式二，渲染结果:<p>name:gege</p><p>age:12</p>-->
<p v-for="(item,key,index) in infos">{{index}}:{{key}}:{{item}}</p> <!--对象格式三，渲染结果:<p>0:name:gege</p><p>1:age:12</p>-->
</div>
<script>
var app = new Vue({
data(){
return {
items:[11,12], //v-for可以是个对象
infos:{name:'gege',age:12} //也可以是个数组
}
},
el:'#app'
})
</script>
</body>
</html> 本文Vue.javascript源码分析(十八)指令篇v-for指令详解到此结束。当你能飞的时候就不要抛却飞。小编再次感谢大家对我们的支持！
