列表渲染的说明》

最新推荐文章于 2024-11-13 15:29:17 发布

zimingyo

最新推荐文章于 2024-11-13 15:29:17 发布

阅读量103

点赞数

分类专栏： Vue初文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/zimingyo/article/details/126821436

版权

Vue初专栏收录该内容

24 篇文章 0 订阅

订阅专栏

v-for遍历数组

v-for="(p,index) in 数组对象的名称"

<body>
    <div id="app">
        <ul v-for="(p,index) in infos" :key="index">
            <li>{{p.name}}--{{p.age}}</li>
        </ul>
    </div>

    <script>
        const vm = new Vue({
            el:'#app',
            data:{
               infos:[{id:1,name:'wzm',age:22},{id:2,name:'lzy',age:18},{id:3,name:'wy',age:21}]

            }
        })
    </script>
</body>

效果图
在这里插入图片描述
v-for遍历对象

<body>
    <div id="app">
        <ul v-for="(val,k) in Phone" :key="k">
            <li>{{k}}--{{val}}</li>
            //k代表属性名，val代表值
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                Phone:{
                    name:'xiaomi',
                    color:'black',
                    price:'1999￥'
                }
            }
        })
    </script>
</body>

效果图
在这里插入图片描述

v-for遍历字符串

<body>
    <div id="app">
        <ul v-for="(char,index) in yu" :key="index">
            <li>{{index}}-{{char}}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                yu:'aszxcdfgv'
            }
        })
    </script>
</body>