Vue.js中深入剖析v-for

最新推荐文章于 2024-10-03 22:12:17 发布

LJ·START

最新推荐文章于 2024-10-03 22:12:17 发布

阅读量120

点赞数

分类专栏： Vue 文章标签： vue css vue.js javascript css3

本文链接：https://blog.csdn.net/weixin_44790446/article/details/116461664

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue.js中深入剖析v-for:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="demo">
        <ol>
            <li v-for="value in arr">{{value}}</li>
        </ol>
    </div>
    <script type="text/javascript">
        new Vue({
            el: "#demo",
            data: {
                arr: ["apple", "banana", "orange", "pear"],
                json: {
                    a: "张三",
                    b: "李四",
                    c: "王五"
                },
            },
        });
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="demo">
        <ol>
            <li v-for="value in arr">{{value}}</li>
        </ol>
        <hr />
        <ol>
            <li v-for="(value,index) in arr">{{value}} {{index}}</li>
        </ol>
        <hr />
        <ol>
            <li v-for="(item,index) in json">{{item}} {{index}}</li>
        </ol>
        <hr />
        <ol>
            <li v-for="(val,key) in json">{{val}} {{key}}</li>
        </ol>
        <hr />
        <ol>
            <li v-for="(val,key,index) in json">{{val}} {{key}} {{index}}</li>
        </ol>
    </div>
    <script type="text/javascript">
        new Vue({
            el: "#demo",
            data: {
                arr: ["apple", "banana", "orange", "pear"],
                json: {
                    a: "张三",
                    b: "李四",
                    c: "王五"
                },
            },
        });
    </script>
</body>

</html>