學習要點：1.v-for 指令
本節課我們來開始學習 Vue 的 v-for 指令以及其它周邊功能。
一．v-for 指令
1. 使用 v-for 指令來渲染一個列表，其中 array 是數據源，item 是元素別名；
<ul> <li v-for="item in arr">{{ item.city }}</li></ul><script>const dataObj={ arr:[ { city:'北京', }, { city:'上海', }, { city:'深圳', } ]};</script>PS：插值使用 item.city 語法來獲取每個元素；
2. 也可以在遍歷的元素項中設置 index，來獲取有序編號，從 0 開始的；
PS：這裡的 in 可以使用 JS 迭代器語法 of：(item, index) of array；
<li v-for="(item,index) in arr">{{ index }} - {{ item.city }}</li>3. v-for 指令也支持對象的遍歷，並且支持(value, name, key)三組值；
<li v-for="(value,name,key) in obj">{{ key }} - {{ name }} - {{value}}</li><script>const datObj={ obj:{ name:'Mr.ren', age:100, gender:'男' }};</script>PS：除了完全體，也可以使用：(value, name)或 value in object；
4. 支持使用<template>進行區塊渲染；
<template v-for="item in arr"> <li>{{ item.city }}</li> <li>----</li></template>5. v-for 也可以使用數值進行循環渲染；
<li v-for="item in 6">{{item}}</li><li><hr/></li>6. 在循環中，我們可能要過濾掉某些數據，那就需要使用 v-if；
<li v-for="item in arr" v-if="flag">{{ item.city }}</li><li v-for="item in arr" v-if="item.city !=='上海'">{{ item.city }}</li>PS：避免 v-for 和 v-if 在同一節點使用，由於 v-for 優先級比 v-if 高，意味著每次循環都要重複執行一遍；
7. 為了避免渲染本應該被隱藏的列表，我們把 v-if 應該放在 v-for 的外層；
<template v-if="flag"> <li v-for="item in arr">{{ item.city }}</li> </template> 8. 將屬性更改為計算屬性，過濾完畢之後再交給視圖進行渲染輸出；
<li v-for="item in cityArr">{{ item.city }}</li><script>computed: { cityArr(){ this.arr.splice(1,1); return this.arr; } },</script>如果您覺得有用，記得在下方點讚、關注、留言，小編會定期奉上更多的驚喜哦，您的打賞支持才是小編繼續努力的動力，麼麼噠。
每日分享在學習過程中總結的學習經驗，學習筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學習為目的，每天閱讀一篇文章，了解身邊的技術，陪有夢想的人一起成長！