v-for指令，看名字想必大家也能猜到其作用，没错，就是用来迭代、遍历的。

1、简单数组的遍历

<body>

    <divi id="app">

        <span v-for="item in list">{{item}}&emsp;</span>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{

                list:['one','two','three','four','five']

            },

            methods:{}

        })

    </script>

</body>

data里定义了list字符串数组，在页面中使用v-for指令对list进行遍历，"item"是当前正在遍历的元素对象，“in”是固定语法，“list”是被遍历的数组。用插值表达式来展示当前遍历的对象。

有时除了遍历数据外，我们还需要当前遍历的序号：

 <divi id="app">

    <span v-for="(item,i) in list">序号为：{{i}}，元素为：{{item}}<br></span>

 </div>

（Item,i）其中i为序号，当然i和item是临时变量可以任意定义。运行结果：

2、对象数组的遍历

<body>

    <divi id="app">

        <span v-for="(item,i) in list">序号：{{i}}，科目为：{{item.course}}，分数为：{{item.score}}<br></span>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{

                list:[

                    {'course':'语文', 'score':89},

                    {'course':'数学', 'score':80},

                    {'course':'英语', 'score':90}

                ]

            },

            methods:{}

        })

    </script>

</body>

通过"item.score"的方法，来获取对象的属性值。运行结果如下：

3、遍历对象

<body>

    <divi id="app">

        <span v-for="(value,key) in mark">属性名：{{key}}，属性值：{{value}}<br></span>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{

                mark:{

                    '语文':90,

                    '数学':95,

                    '英语':89

                }

            },

            methods:{}

        })

    </script>

</body>

这里定义了一个mark对象，该对象有三个属性，遍历对象的时候固定写法为：(XX,YY)，其中YY为对象的key，XX为对象的值。

当然也可以写成：(XX,YY,i)，其中i为索引值。

4、遍历数字

<divi id="app">

      <span v-for="count in 5">当前数字为：{{count}}<br></span>

</div>

这里in后面直接写的是具体的数字。运行结果：

总结：v-for进行遍历的时候，其可以遍历数组、对象数组、对象、数字。

每天进步一点点！

Vue学习之路第十三篇：v-for指令的更多相关文章

  1. Vue学习之路第四篇：v-html指令

    上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上: 1.插值表达式 2.v-text指令 但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如 ...

  2. Vue学习之路第三篇：插值表达式和v-text的区别

    上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...

  3. vue学习指南：第十三篇(详细) - Vue的 路由 第三篇 ( 路由的缓存 )

    路由的缓存 路由缓存是 Vue组件优化的一个重要方法 为什么实现路由缓存? 为了 组件间 相互切换不会重复加载数据,影响用户体验,我们通常需要将组件的数组实现缓存,当我们点过来,在点的时候会再次发送 ...

  4. Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  5. Vue学习之路第十一篇：为页面元素设置class类样式

    1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...

  6. Vue学习之路第十篇：简单计算器的实现

    前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...

  7. Vue学习之路第八篇：事件修饰符

    学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...

  8. Vue学习之路第七篇：跑马灯项目实现

    前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以 ...

  9. Vue学习之路第五篇：v-bind

    v-bind:是Vue提供的用于绑定html属性的指令. html中常见的属性有:id.class.src.title.style等,他们都是以 名称/值对 的形式出现,如:id="firs ...

随机推荐

  1. MariaDB 10.x 将包含多主复制功能

    本文内容遵从CC版权协议, 可以随意转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明网址: http://www.penglixun.com/tech/database/multi_so ...

  2. poj 1523 求割点把一个图分成几个联通部分

    #include<stdio.h> #include<string.h> #define N 1100 struct node { int u,v,next; }bian[N* ...

  3. hdu 3714 三分

    #include<stdio.h> #define mi 1e-9 #define N 11000 struct node{ double x,y,z; }a[N]; int n; dou ...

  4. 【ACM】hdu_zs1_1003_放大的X _201307271557

    放大的X Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other)Total Submissio ...

  5. BS程序怎样通过浏览器了解点击响应时间

    原创作品,出自 "深蓝的blog" 博客.欢迎转载,转载时请务必注明出处,否则有权追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlo ...

  6. 【iOS开发系列】九宫格布局

    /** * 这个尽管非常easy,算是一个小技巧,可是碰到了就记录下来吧.积跬步,致千里嘛. */ - (void)scratchableLatex { for (int i=0; i<9; i ...

  7. 8 Reasons why SharePoint is Bad for Your Business 8个理由告诉你，为什么SharePoint对你的业务有害

    8 Reasons why SharePoint is Bad for Your Business 8个理由告诉你,为什么SharePoint对你的业务有害         SharePoint近期已 ...

  8. C++设计模式之状态模式(二)

    2.智能空调的设计与实现 某软件公司将开发一套智能空调系统: 系统检測到温度处于20---30度之间,则切换到常温状态:温度处于30---45度,则切换到制冷状态: 温度小于20度,则切换到制热状态. ...

  9. Libgdx: android单机斗地主支持局域网wifi联网的网络模块核心代码

    这个作品是我近期写的,结合我的毕业设计的通信模块和之前的单机版斗地主.我已经上架到豌豆荚了,贴了点广告,看看能不能赚点茶钱. 但是一点也不乐观.因此我想分享给大家源代码. 仅仅要不用于商业. 以下先贴 ...

  10. sql系列（基础篇）-前言 课前补充知识

    前言 课前补充知识 Number(p,s) Number(p,s):数字类型,p 表示数字的有效长度(从数字的左边第 1 位不为 0 的開始算起,直到最右边的长度.取值范围 0~38 位),s 表示数 ...