Vue第四天（迭代数据）

最新推荐文章于 2022-12-21 20:04:00 发布

若叶-知秋

最新推荐文章于 2022-12-21 20:04:00 发布

阅读量335

点赞数

文章标签： Vue 自学菜鸟

本文链接：https://blog.csdn.net/qq_31051117/article/details/83993967

版权

准备步骤如第一天

代码：（测试注意事项：js中的代码依次开启测试，不可全部开启，会报错）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
    <script src="../node_modules/jquery"></script>
</head>
<body>

<!--v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名-->
<div id="app1">
    <ol>
        <li v-for="site in sites">
            {{site.name}}
        </li>
    </ol>
</div>

<!--v-for 迭代对象-->
<div id="app2">
    第一种方式：
    <ul>
        <li v-for="value in List">
            {{value}}
        </li>
    </ul>
    <br>

    第二种方式：
    <ul>
        <li v-for="(value, key) in List">
            {{ key }} : {{ value }}
        </li>
    </ul>
    <br>

    第三种方式：
    <ul>
        <li v-for="(value, key, index) in List">
            {{ index }}：{{ key }} ： {{ value }}
        </li>
    </ul>
</div>

<!--v-for 迭代整数-->
<div id="app3">
    <ul>
        <li v-for="n in 10">
            {{n}}
        </li>
    </ul>
</div>

</body>
<script type="text/javascript">
    /*v-for指令*/
    /*    new Vue({
            el:'#app1',
            data:{
                sites:[
                    {name:'for'},
                    {name:'语'},
                    {name:'句'}
                ]
            }
        })*/

    /*v-for迭代指令*/
    /*    new Vue({
            el:'#app2',
            data:{
                List:{
                    name:'迭代数据1',
                    url:'迭代数据2',
                }
            }
        })*/

    <!--v-for 迭代整数-->
    new Vue({
        el: '#app3'
    })
</script>
</html>