[JavaScript知识库] Vue

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue_12:列表渲染 -> 正文阅读

[JavaScript知识库]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>
</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.可遍历：数组，对象，字符串（少），指定次数（少）

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理