专业网站建设-网站设计-网站制作与网站开发-高端品牌企业宣传策划-玉树上往建站
bject: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})</script>
尝试一下 »
你也可以提供第二个的参数为键名：
v-for
<div id="app">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }} </li>
</ul></div>
尝试一下 »
第三个参数为索引：
v-for
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }} </li>
</ul></div>
尝试一下 »
v-for 迭代整数
v-for 也可以循环整数
v-for
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }} </li>
</ul></div>
尝试一下 »
v-for 还可以循环数组：
<div id="app">
<ul>
<li v-for="n in [1,3,5]">
{{ n }}
</li>
</ul>
</div>
尝试一下 »
wally
wally
177***86076@139.com
5年前 (2017-10-19)
锋
cka***ng@qq.com
参考地址
88
v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性：
<div v-for="item in items" :key="item.id"> {{ item.text }}</div>
锋
锋
cka***ng@qq.com
参考地址
5年前 (2017-11-08)
boser
602***724@qq.com
75
不仅如此，在迭代属性输出的之前，v-for会对属性进行升序排序输出：
new Vue({
el: '#app',
data: {
object: {
2: '学的不仅是技术，更是梦想！',
1: '菜鸟教程',
0: 'http://www.runoob.com'
}
}
})
尝试一下 »
输出：
http://www.runoob.com
菜鸟教程
学的不仅是技术，更是梦想！
boser
boser
602***724@qq.com
5年前 (2017-11-29)
hunterfall
777***21@qq.com
22
遍历对象的时候可以处理嵌套。
<div id="app">
<ul>
<li v-for="(value,key,index) in object">
<p v-if="typeof value !='object'">{{value}}....{{ index }}</p>
<p v-else>{{key}}....{{index}}</p>
<ul v-if="typeof value == 'object'">
<li v-for="(value, key, index) in value">
{{key}}:{{value}}....{{ index }}
</li>
</ul>
</li>
</ul>
</div>
尝试一下 »
hunterfall
hunterfall
777***21@qq.com
4年前 (2018-07-12)
某人
767***68@qq.com
190
九九乘法是程序员的最爱:
<div id="app">
<div v-for="n in 9">
<b v-for="m in n">
{{m}}*{{n}}={{m*n}}
</b>
</div>
</div>
尝试一下 »
专业网站建设-网站设计-网站制作与网站开发-高端品牌企业宣传策划-玉树上往建站
