一、v-for 遍历数组
jsp 代码
<body>
<h2>v-for 循环语句</h2>
<ul id="vfor">
<template v-for="name in names">
<li>{{name.name}}</li>
<li>-------</li>
</template>
</ul>
</body>
<script type="text/javascript">
/*定义的数据 使用for循环去获取*/
new Vue({
el:"#vfor",
data:{
names:[
{name:'estar'},
{name:'TingPing'},
{name:'LiangXing'},
]
}
});
</script> 结果图：
（二）v-for 遍历对象
1、遍历对象第一种写法
<div id="vforObject">
<ul>
<li v-for="object in objects">
{{object}}
</li>
</ul>
</div>
/*定义的对象 使用for循环去获取*/
new Vue({
el:"#vforObject",
data:{
objects:{
name:'estar',
address:'TingPing',
desc:'深造于保险行业已经10之久'
}
}
}); 结果图：
2、遍历对象第一种写法
<div id="vforObject">
<ul>
<li v-for="(value,key) in objects">
{{key}} : {{value}}
</li>
</ul>
</div>
/*定义的对象 使用for循环去获取*/
new Vue({
el:"#vforObject",
data:{
objects:{
name:'estar',
address:'TingPing',
desc:'深造于保险行业已经10之久'
}
}
}); 结果图
name : estar
address : TingPing
desc : 深造于保险行业已经10之久 3、遍历集合中的对象
<!-- v-for遍历集合 -->
<div id="vforList">
<template v-for="obj in objects">
<ul>
<li >
<label>姓名：{{obj.name}}</label> <br/>
<label>地址：{{obj.address}}</label> <br/>
<label>主要业务：{{obj.desc}}</label> <br/>
</li>
</ul>
</template>
</div>
/*编译数组中的集合*/
var v = new Vue({
el:"#vforList",
data:{
objects:[
{
name:'estar1-flx',
address:'广州市天河区中山大道89号华景软件园A栋10楼F区',
desc:'深造于保险行业已经10之久'
},
{
name:'estar2-flx',
address:'广州市天河区中山大道89号华景软件园A栋10楼F区',
desc:'深造于保险行业已经10之久'
},
{
name:'estar3-flx',
address:'广州市天河区中山大道89号华景软件园A栋10楼F区',
desc:'深造于保险行业已经10之久'
}
]
}
}); 结果图
-
姓名：estar1-flx
地址：广州市天河区中山大道89号华景软件园A栋10楼F区
主要业务：深造于保险行业已经10之久
-
姓名：estar2-flx
地址：广州市天河区中山大道89号华景软件园A栋10楼F区
主要业务：深造于保险行业已经10之久
-
姓名：estar3-flx
地址：广州市天河区中山大道89号华景软件园A栋10楼F区
主要业务：深造于保险行业已经10之久