v-bind / v-on / v-if / v-for , 这四个指令应该是 vue 里面最常用的了, 之前已经简单记录的前三个的使用方法, 接下来就记一下 v-for 的基本用法.

1. v-for 需要使用 x in xs 的这种写法, 类似 for i in rangeA  循环, xs 代表需要循环创建的数据源, 所有可迭代对象, 包括一般对象都是可以作为 v-for 的循环数据源的. 而 x 则是循环的当前数据的别名. 如下所示, 我们发现 v-for 中的数据源可以不是 vApp.$data 中的属性, 而可以是在全局作用域下的任何变量.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

</head>

<body>

    <div id="app">

        <ul>

            <li v-for="i in names">{{ i }}</li>

        </ul>

    </div>

    <script>

        var names = ["李雷", "韩梅梅", "李强", "张伟", "张杰"];

        var vApp = new Vue({

            el: "#app"

        })

    </script>

</body>

</html>

2. 可以在 <template> 上使用 v-for, 渲染时 <template> 不会被渲染出来. 这在平时应该会经常被用到.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

</head>

<body>

    <div id="app">

        <template v-for="i in names">

            <img v-bind:src="i.avatar" alt="">&nbsp;&nbsp;<strong>{{ i.name }}</strong>

            <hr />

        </template>

    </div>

    <script>

        var names = [

            {"name":"李雷","avatar":"https://images.cnblogs.com/cnblogs_com/aisowe/1536642/t_sister.jpg"},

            {"name":"韩梅梅","avatar":"https://images.cnblogs.com/cnblogs_com/aisowe/1536642/t_sister.jpg"},

            {"name":"李强","avatar":"https://images.cnblogs.com/cnblogs_com/aisowe/1536642/t_sister.jpg"}

        ];

        var vApp = new Vue({

            el: "#app"

        })

    </script>

</body>

</html>

3. v-for 也可以迭代对象中的数据, 注意, 这里的迭代会默认将值转换为字符串, 比如下面的 sayHello 是一个方法, 但被 toString() 为一个字符串. 注意这里 (value, key, index) in names 的用法. 这里的 index 很重要, 表示循环时的下标或当前次数.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

</head>

<body>

    <div id="app">

        <p v-for="(value, key, index) in names">{{ index + 1 }}. {{ key }} : {{ value }}</p>

    </div>

    <script>

        var vApp = new Vue({

            el: "#app",

            data: {

                names: {

                    "name": "韩梅梅",

                    "avatar": "https://images.cnblogs.com/cnblogs_com/aisowe/1536642/t_sister.jpg",

                    "sayHello": function () { alert("hello") }

                    }

            }

        })

    </script>

</body>

</html>

4. 此外, v-for 也可以迭代 整数 和 字符串, 这个感觉是用的不多的.~.~

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

</head>

<body>

    <div id="app">

        <p v-for="i in '李雷'">{{ i }}</p>

        <p v-for="n in 3 ">{{ n }}</p>

    </div>

    <script>

        var vApp = new Vue({

            el: "#app"

        })

    </script>

</body>

</html>

5. 总结起来, v-for 跟 js 中的 for in 循环在行为上是高度相似的, 可以类比.

怎样使用 v-for ?的更多相关文章

  1. J a v a 的“多重继承”

    接口只是比抽象类“更纯”的一种形式.它的用途并不止那些.由于接口根本没有具体的实施细节——也就是说,没有与存储空间与“接口”关联在一起——所以没有任何办法可以防止多个接口合并到一起.这一点是至关重要的 ...

  2. Exception in thread "main" java.lang.NoSuchMethodError: org.objectweb.asm.ClassWriter.<init>(I)V

    在学习CGlib动态代理时,遇到如下错误: Exception in thread "main" java.lang.NoSuchMethodError: org.objectwe ...

  3. [Erlang 0118] Erlang 杂记 V

       我在知乎回答问题不多,这个问题: "对你职业生涯帮助最大的习惯是什么?它是如何帮助你的?",我还是主动回答了一下.    做笔记 一开始笔记软件做的不好的时候就发邮件给自己, ...

  4. v$session中server为none与shared值解析

    查询V$SESSION,你会看到SERVER可能会有DEDICATED| SHARED| PSEUDO| NONE 四种值,如果SERVER字段的值除了DEDICATED,还有NONE,则说明当前实例 ...

  5. 引用js或css后加?v= 版本号的用法

    <span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?version ...

  6. 操作系统中的P,V操作（转）

    无论是计算机考研.计算机软件水平考试.计算机操作系统期末考试还是其他计算机岗位考试,P.V原语操作都是一个常考点.下面笔者总结了关于P.V操作的一些知识. 信号量是最早出现的用来解决进程同步与互斥问题 ...

  7. 关于P,V操作理解的突破，关于并发设计与并行

    今天又找了一篇博客研究P,V操作.. 发现..它有一个变量没有声明.. 我就换了篇博客..http://c.biancheng.net/cpp/html/2600.html 然后就看懂了.. 关键突破 ...

  8. XV Open Cup named after E.V. Pankratiev. GP of Tatarstan

    A. Survival Route 留坑. B. Dispersed parentheses $f[i][j][k]$表示长度为$i$,未匹配的左括号数为$j$,最多的未匹配左括号数为$k$的方案数. ...

  9. XVII Open Cup named after E.V. Pankratiev. GP of SPb

    A. Array Factory 将下标按前缀和排序,然后双指针,维护最大的右边界即可. #include<cstdio> #include<algorithm> using ...

  10. XVI Open Cup named after E.V. Pankratiev. GP of Ukraine

    A. Associated Vertices 首先求出SCC然后缩点,第一次求出每个点能到的点集,第二次收集这些点集即可,用bitset加速,时间复杂度$O(\frac{nm}{64})$. #inc ...

随机推荐

  1. 最小n个和（优先队列）

    给出两个包含 nn 个整数的数组 AA,BB.分别在 AA, BB 中任意出一个数并且相加,可以得到 n^2n2个和.求这些和中最小的 nn 个. 输入格式输入第一行一个整数 n(1 \le n \l ...

  2. golang中mysql建立连接超时时间timeout 测试

    本文测试连接mysql的超时时间. 这里的"连接"是建立连接的意思. 连接mysql的超时时间是通过参数timeout设置的. 1.建立连接超时测试 下面例子中,设置连接超时时间为 ...

  3. LC 275. H-Index II

    Given an array of citations sorted in ascending order (each citation is a non-negative integer) of a ...

  4. jQuery常用Event-API

    目的:对web页面(HTML/JSP)进行事件触发,完成特殊效果的处理 window.onload:在浏览器加载web页面时触发,可以写多次onload事件,但后者覆盖前者 ready:在浏览器加载w ...

  5. js 中 new call apply bind JSON.stringify 的原理以及模拟实现

    1.new的原理和实现 它创建了一个全新的对象. 它会被执行 [[Prototype]](也就是 __proto__)链接. 它使 this指向新创建的对象. 通过 new创建的每个对象将最终被 [[ ...

  6. B站动手学深度学习第十八课：seq2seq（编码器和解码器）和注意力机制

    from mxnet import nd h_forward = nd.array([1,2]) h_backward = nd.array([3,4]) h_bi = nd.concat(h_for ...

  7. Kettle实现从mysql中取2张表数据关联的数据，并写入到mongodb中

    1 建立转换,并设置DB连接到mysql 选中DB连接:连接类型选择MySQL,输入主机名称,数据库名称,端口号,用户名,密码 输入连接名称,点击确定.(可以先点击测试,测试一下是否连接成功) 如下图 ...

  8. docker search 报错

    docker 出现 Error response from daemon vim /etc/containers/registries.conf [registries.search]registri ...

  9. Claymore's Dua Miner挖矿教程

    一.软件准备:首先需要一款挖矿软件.在这里推荐Claymore's Dua Miner的官方原版. 注意: 1. 如果不了解,请不要在网上随意下载其它版本的挖矿软件或者Claymore's Dua M ...

  10. 纹理特征描述之自相关函数法 纹理粗糙性与自相关函数的扩展成正比 matlab代码实现

    图像中通常采用自相关函数作为纹理测度 自相关函数的定义为: ​ 调用自定义函数 zxcor()对砖墙面和大理石面纹理进行分析: 自定义函数 zxcor(): function [epsilon,eta ...