學習要點:
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)整理發布!