vue中的v-for的使用方法

最新推荐文章于 2024-07-18 18:59:22 发布

晓明的日常操作

最新推荐文章于 2024-07-18 18:59:22 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/wangming2531/article/details/108864202

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item,index) in list">
                    <!-- v-for遍历 可以动态追加标签 item代表的是数组的元素 index代表的是数组的下标 -->
                    <!-- 在所需要的遍历的标签上增加v-for即可  v-for="(item,index) in 变量" -->
                    <img v-bind:src="item.src" alt="">
                    <h1>{{item.con}}</h1>
                </li>              
            </ul>			
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    list:[
                        {
                            src:'https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/07/09/96/15942612596698.jpg!85.webp',
                            con:'这是美丽的图片'
                        },
                        {                            src:'https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/07/09/96/15942612596698.jpg!85.webp',
                            con:'这是图片'
                        },
                        {
                            src:'https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/07/09/96/15942612596698.jpg!85.webp',
                            con:'这是图'
                        },
                        {
                            src:'https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/07/09/96/15942612596698.jpg!85.webp',
                            con:'这是'
                        },
                        {
                            src:'https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/07/09/96/15942612596698.jpg!85.webp',
                            con:'这是'
                        },
                        {
                            src:'https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/07/09/96/15942612596698.jpg!85.webp',
                            con:'这是'
                        }
                    ]
                }
            })
        </script>
    </body>
</html>