Vue_12:列表渲染

最新推荐文章于 2024-08-04 23:51:36 发布

易辰不呆

最新推荐文章于 2024-08-04 23:51:36 发布

阅读量83

点赞数

分类专栏：笔记文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/wcj28738/article/details/120922914

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<body>
    <div id="root">
        <h2>人员列表(遍历数组)</h2>
        <ul>
            <li v-for="(p,index) in person" :key="p.id">
            {{p.name}}-{{p.age}}
            </li>
        </ul>
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el:'#root'
        data:{
            person:{
                {id:'001',name:'张三',age:18},
                {id:'002',name:'李四',age:19},
                {id:'003',name:'王五',age:20}
            }
        }
    })
</script>

v-for指令：

1.用于展示列表数据

2.语法：v-for="(item,index) in xxx" :key="yyy"

3.可遍历：数组，对象，字符串（少），指定次数（少）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

易辰不呆

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue_12:列表渲染

<body> <div id="root"> <h2>人员列表(遍历数组)</h2> <ul> <li v-for="(p,index) in person" :key="p.id"> {{p.name}}-{{p.age}} </li> </ul> </div>.
复制链接

扫一扫