v-for.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-循环</title>
    <script src="js/vue.js"></script>
    <script>
        //v-for 循环获取数据
        window.onload = function () {
            new Vue({
                el: "#box",
                data: {
                    list: ['a', 'b', 'c'],
                    json: {a: "hh", b: "kk", c: "ll"}
                }
            })
        }
    </script>
</head>
<body>

<div id="box">
    <ul>
        <li v-for="value in list">{{value}} {{$index}}</li><!--index是指的是当前item的下标 -->
    </ul>
    <hr>
    <ul>
        <li v-for="value in json">
            {{value}} {{$index}} {{$key}}
        </li>
    </ul>
    <hr>

    <ul>
        <li v-for="(k,v) in json">
            {{k}} {{v}} {{$index}} {{$key}}
        </li>
    </ul>
</div>

</body>
</html>