遍历数组和对象
和条件选择一样，循环也和其他语言类似，也尝试着用一个例子解决问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app-1"> <div v-for="(site, index) in sites"> {{ index + 1 }}.{{ site.name }} <li v-for="(value, key, index) in site"> {{ key }}: {{ value }} </li> </div> </div> <script type="text/javascript"> var vm1 = new Vue({ el: '#app-1', data: { sites: [ { url: 'http://www.tansea.cn', name: '双子宫殿', prValue: 0 }, { url: 'https://www.google.com', name: '谷歌', prValue: 10 }, { url: 'https://www.baidu.com', name: '百度', prValue: 9 } ] } }) </script> </body> </html>
外循环的sites是一个数组，遍历数组的语法格式：(item, index) in items，item指迭代元素，index指索引，items指原始数据数组
内循环的site是一个对象，遍历对象的语法格式：(value, key, index) in object，value指属性值，key指属性名称，index指索引，object指对象
当然参数也是可以缺省的，在只有一个参数的时候可以不用刮号
<div id="app-1"> <div v-for="site in sites"> {{ site.name }} <li v-for="(value, key) in site"> {{ key }}: {{ value }} </li> </div> </div>
在整数范围内迭代
<div id="app-2"> <span v-for="n in 10">{{ n }}</span> <span v-for="n in [1,3,5,7,9]">{{ n }}</span> </div> <script type="text/javascript"> var vm2 = new Vue({ el: '#app-2' }) </script>
n in 10是1到10整数范围内迭代
n in [1,3,5,7,9]是数组内元素迭代，这里的数组包括5个元素