使用v-for遍历数据

遍历数组

let vm = new Vue({
    el: "#app",
    data: {
        title: '金庸英雄',
        heros: ['乔峰', '段誉', '虚竹', '郭靖', '杨过']
    }
})
<ul class="list-group">
    <li class="list-group-item" v-for="(value, key) in heros">
        {{ key }} -- {{ value }}
    </li>
</ul>

具体代码

遍历数组

遍历数组中的对象

let vm = new Vue({
    el: "#app",
    data: {
        heros: [
            {'id': 1, name: '曹操', saying: '宁要我负天下人,休叫天下人负我!'},
            {'id': 2, name: '刘备', saying: '备若有基业,天下碌碌之辈,诚不足虑也'},
            {'id': 3, name: '关羽', saying: '汝比颜良、文丑若何?'},
        ]
    }
})
<ul class="list-group">
    <li class="list-group-item" v-for="(hero, index) in heros">
        {{ hero.id }}.{{ hero.name }}:{{ hero.saying }}
    </li>
</ul>

具体代码

遍历数组中的对象

遍历对象

let vm = new Vue({
    el: "#app",
    data: {
        user: {
            '姓名': '窃.格瓦拉',
            '性别': '男',
            '名言': '打工是不可能打工的,这辈子都不可能打工的'
        }
    }
})
<p v-for="(val, key, i) in user">
    {{ key }} : {{ val }}
</p>

具体代码

遍历对象

遍历整数

let vm = new Vue({
    el: "#app",
    data: {
        sum: 15
    }
})
<ul class="list-group">
    <li v-for="count in sum" class="list-group-item">
        第 {{ count }} 次循环
    </li>
</ul>

具体代码

遍历整数

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码洞

人生苦短我用Python?No!学习Python的真正理由其实是

作者:gashero 链接:https://www.zhihu.com/question/282875062/answer/441546530

8210
来自专栏hightopo

HTML5实现3D和2D可视化QuadTree四叉树碰撞检测

19860
来自专栏GIS讲堂

Arcgis for JS之Cluster聚类分析的实现

在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来的,包含XY坐标信息的,通过graphic和graphiclayer 的方式添加到地图上...

22330
来自专栏前端知识分享

第152天:表单短标题的两端对齐

在做前端界面的时候,比如一些文字的列表或者一些表单的标题,经常是2个字,3个字,4个字的类型。

16320
来自专栏HT

HTML5实现3D和2D可视化QuadTree四叉树碰撞检测

QuadTree四叉树顾名思义就是树状的数据结构,其每个节点有四个孩子节点,可将二维平面递归分割子区域。QuadTree常用于空间数据库索引,3D的椎体可见区域...

28590
来自专栏Flutter&Dart

Flutter之通过AnimationController源码分析学习使用Animation

他实际上就是一个抽象类,在dart里面抽象类可继承可实现,看源码知道,他主要的一个方法就是dispose,用于规定释放资源的方法

48820
来自专栏数据结构与算法

P1103 书本整理

题目描述 Frank是一个非常喜爱整洁的人。他有一大堆书和一个书架,想要把书放在书架上。书架可以放下所有的书,所以Frank首先将书按高度顺序排列在书架上。但是...

35980
来自专栏听雨堂

mapx实现热点效果

        当鼠标移动到图元上方时,标注改变样式(变色,加下划线等),移开后还原。通过vb+mapx基本实现这个效果,但由于mapx在label进行变化时的...

19870
来自专栏web编程技术分享

js正则表达式简单应用

40150
来自专栏向治洪

android动画之interpolator和typeEvaluator用法详解

Interpolator (插值器) 我们在写动画的时候为了达到某种效果往往需要设置插值器,用来真实的模拟生活中的场景。  Interpolator (插值器)...

22790

扫码关注云+社区

领取腾讯云代金券