(三)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之久"
}
}
});结果图
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： [转]榨干 PHP,不得不转的一篇PHP使用技巧!
- 下一篇： C++的字符串长度获取办法
copyright © 2008-2019 亿联网络 版权所有 备案号：粤ICP备14031511号-2