前言
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: '//m.survivalescaperooms.com', slogan: '美好生活，等待你的開創！' } } })</script>效果：
武林網
//m.survivalescaperooms.com
美好生活，等待你的開創！
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: '//m.survivalescaperooms.com', slogan: '美好生活，等待你的開創！' } } })</script>效果：
name : 武林網
url : //m.survivalescaperooms.com
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: '//m.survivalescaperooms.com', slogan: '美好生活，等待你的開創！' } } })</script>效果：
0 name:武林網
1 url://m.survivalescaperooms.com
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>效果：
12345678910
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
