03 循环v-for遍历数组并展示

最新推荐文章于 2024-05-05 18:17:26 发布

啊这渣渣

最新推荐文章于 2024-05-05 18:17:26 发布

阅读量267

点赞数

分类专栏：前端实训文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_56066323/article/details/131557732

版权

前端实训专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

1、在script新建json数据
2、在主体写v-for遍历json
3、效果展示
4、完整代码

1、在script新建json数据

<script>
    new Vue({
        el :'#app',
        data :{ //json数据[{},{},{}]
            list :[{
                title : '月入过万',
                content:'国外游',
            },{
                title : '月入五千',
                content:'省内游',
            },
            {
                title : '月入三千',
                content:'地沟油',
            },
            {
                title : '月入两千',
                content:'梦游',
            }]
        }
    })
</script>

2、在主体写v-for遍历json

<body>
    <div id="app">
        <!-- 使用v-for循环遍历下面数组的数据 -->
        <ul>
            <li v-for="(item,index) in list">{{index +1}}.{{item.title}}，{{item.content}}</li>
        </ul>
    </div>
    
</body>

3、效果展示

4、完整代码

<!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">
        <!-- 使用v-for循环遍历下面数组的数据 -->
        <ul>
            <li v-for="(item,index) in list">{{index +1}}.{{item.title}}，{{item.content}}</li>
        </ul>
    </div>
    
</body>
<script src="./vue.js"></script>
<script>
    new Vue({
        el :'#app',
        data :{ //json数据[{},{},{}]
            list :[{
                title : '月入过万',
                content:'国外游',
            },{
                title : '月入五千',
                content:'省内游',
            },
            {
                title : '月入三千',
                content:'地沟油',
            },
            {
                title : '月入两千',
                content:'梦游',
            }]
        }
    })
</script>
</html>