Vue.js学习笔记 第四篇 列表渲染

遍历数组和对象

和条件选择一样，循环也和其他语言类似，也尝试着用一个例子解决问题

<!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个元素