v-for
1.循环整数
<div id="app">
<ul>
<li v-for="n in 9">
{{n}}
</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
})
</script>
#结果:
- 模板循环v-for
<div id="app">
<h1>模板中使用 v-for:</h1>
<ol>
<template v-for="site in i">
<!-- 模板中使用 v-for -->
<li>模板循环:
{{ site.name }}
</li>
<li>----------</li>
</ol>
</template>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
i: [
{name: '小张'},
{name: '小王'},
{name: '小李'}
]
}
})
</script>
#结果:
3.v-for 可以绑定数据到数组来渲染一个列表:
<div id="app">
<ol>
<li v-for="site in ia">
{{ site.last }}
</li>
<li>----------</li>
</ol>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
ia: [{
last: 'a'
},
{
last: 'b'
},
{
last: 'c'
},
]
}
})
</script>
#结果:
- v-for 可以通过一个对象的属性来迭代数据
<div id="app">
<ul>
<li v-for="value in object">
{{value}}
</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
object: {
student: '小爱',
city: '重庆',
email: 'sina @126.com',
}
}
})
</script>
#结果:
- v-for="(value,key) in object"提供第二个的参数key为键名:
<div id="app">
<ul>
<li v-for="(value,key) in object">
{{key}}:{{value}}
</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
object: {
student: '小爱',
city: '重庆',
email: 'sina @126.com',
}
}
})
</script>
#结果:
6.v-for="(value,key,index) in object"第三个参数index为索引:
<div id="app">
<ul>
<li v-for="(value,key,index) in object">
{{index}}.{{key}}:{{value}}
</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
object: {
student: '小爱',
city: '重庆',
email: 'sina @126.com',
}
}
})
</script>
#结果: