學習要點：
1.循環列表指令
本節課我們來開始學習 Vue3.x 的循環列表指令 v-for 的使用方式。
一．循環列表指令
1. 使用 v-for 指令來渲染一個列表，其中 array 是數據源，item 是元素別名；
<ul>
<li v-for="item in array">{{item.city}}li>
ul>
data() {
return {
array : [
{
city : '北京'
},
{
city : '上海'
},
{
city : '廣州'
},
{
city : '深圳'
}
]
}
},
PS：也可以在遍歷的元素項中設置 index，來獲取有序編號，從 0 開始的；
<li v-for="(item, index) in array">{{index}}.{{item.city}}li>
PS：這里的 in 可以使用 JS 迭代器語法 of：(item, index) of array；
PS：index 參數在第二位置，item 在第一個參數位置；
2. 如果數據是一個對象，內部包含多個屬性，那也可以使用 v-for 遍歷；
<ul>
<li v-for="item in object">{{item}}li>
ul>
data() {
return {
object : {
name : 'Mr.Lee',
gender : '男',
age : 100
}
}
}
PS：這里支持(value, name, key)的參數，支持單獨輸出；
<li v-for="(value, name, key) in object">{{key}}.{{name}}.{{value}}li>
本文由:蘭州啟點網絡（
www.syzhibo.net)整理發布!
啟點CMS演示地址及賬號
