(三)Vue.js v-for循环遍历 20170818
一、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之久"
}
}
});结果图
声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇：没有了
- 下一篇：没有了
copyright © 2008-2019 入门客AI创业平台 版权所有 备案号：湘ICP备2023012770号