前言
Vue.js中，v-for 指令需要以 item in items 形式的特殊語法， items 是源數據數組并且 item 是數組元素迭代的別名。
v-for 可以綁定數據到數組來渲染一個列表：
<div id="wantuizhijia">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#wantuizhijia',
data: {
sites: [
{ name: '網推之家' },
{ name: '谷歌' },
{ name: '淘寶' }
]
}
})
</script>
輸出：
模板中使用 v-for：
<div id="wantuizhijia">
<ul>
<template v-for="place in places">
<li>{{ place.name }}</li>
<li>--------------</li>
</template>
</ul>
</div>
<script>
new Vue({
el: '#wantuizhijia',
data: {
places: [
{ name: '廈門' },
{ name: '漳州' },
{ name: '福州' }
]
}
})
</script>
效果：
v-for 可以通過一個對象的屬性來迭代數據：
<div id="wangtuizhijia">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#wangtuizhijia',
data: {
object: {
name: '億速云',
url: 'https://www.jb51.net',
slogan: '美好生活，等待你的開創！'
}
}
})
</script>
效果：
億速云
https://www.jb51.net
美好生活，等待你的開創！
v-for 通過一個對象的屬性來迭代數據，可以提供第二個的參數為鍵名：
<div id="wangtuizhijia">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#wangtuizhijia',
data: {
object: {
name: '億速云',
url: 'https://www.jb51.net',
slogan: '美好生活，等待你的開創！'
}
}
})
</script>
效果：
name : 億速云
url : https://www.jb51.net
slogan : 美好生活，等待你的開創！
v-for 通過一個對象的屬性來迭代數據，以第三個參數為索引：
<div id="wangtuizhijia">
<ul>
<li v-for="(value, key, index) in object">
{{ index }} {{ key }}:{{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#wangtuizhijia',
data: {
object: {
name: '億速云',
url: 'https://www.jb51.net',
slogan: '美好生活，等待你的開創！'
}
}
})
</script>
效果：
0 name:億速云
1 url:https://www.jb51.net
2 slogan:美好生活，等待你的開創！
v-for 也可以循環整數
<div id=”wangtuizhijia”>
<ul>
<li v-for=”n in 10″>
{{ n }}
</li>
</ul>
</div>
<script>
new Vue({
el: ‘#wangtuizhijia'
})
</script>
</body>
效果：
1 2 3 4 5 6 7 8 9 10
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
