v-for 循環語句

循環使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊語法， sites 是源數據數組並且 site 是數組元素迭代的別名。

v-for 可以綁定數據到數組來渲染一個列表：

v-for 指令

<divid="app"><ol><liv-for="site in sites">
{{ site.name }} </li></ol></div><script>new Vue({
el: "#app",
data: {
sites: [
{ name: "Runoob" },
{ name: "Google" },
{ name: "Taobao" }
]
}
})</script>

嘗試一下 ?

模板中使用 v-for：

v-for

<ul><templatev-for="site in sites"><li>{{ site.name }}</li><li>--------------</li></template></ul>

嘗試一下 ?

v-for 迭代對象

v-for 可以通過一個對象的屬性來迭代數據：

v-for

<divid="app"><ul><liv-for="value in object">
{{ value }} </li></ul></div><script>new Vue({
el: "#app",
data: {
object: {
name: "菜鳥教程",
url: "http://www.runoob.com",
slogan: "學的不僅是技術，更是夢想！"
}
}
})</script>

你也可以提供第二個的參數為鍵名：

v-for

<divid="app"><ul><liv-for="(value, key) in object">
{{ key }} : {{ value }} </li></ul></div>

嘗試一下 ?

第三個參數為索引：

v-for

<divid="app"><ul><liv-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }} </li></ul></div>

嘗試一下 ?

v-for 迭代整數

v-for 也可以循環整數

v-for

<divid="app"><ul><liv-for="n in 10">
{{ n }} </li></ul></div>

嘗試一下 ?

Vue.js 條件語句

Vue.js 計算屬性

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！