专栏首页Debug客栈Vue.js入门笔记 v-for循环

Vue.js入门笔记 v-for循环

可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名

v-for 循环普通数组

<div id="app">
    <p v-for="(item, i) in data">
        索引是{{ i }} --- 内容是{{ item }}
    </p>
</div>

js:
data : {
    data : [1,2,3,4,5],
},

v-for 循环对象数组

<div id="app">
    <p v-for="(item, i) in data1">
        索引是:{{ i }} -- - 内容是{{ item.id }}--{{ item.name }}
    </p>
</div>

js:
data: {
    data1: [
        { id: 1, name: "name1" },
        { id: 2, name: "name2" },
        { id: 3, name: "name3" }
    ]
},

v-for 循环对象

<div id="app">
    <p v-for="(data, key, i) in user">
        索引:{{ i }},键值:{{ key }},内容:{{ data }}
    </p>
</div>

js:
data: {
    user: {
        id: 1,
        name: "tim",
        age: 18,
        width: 200
    }
},

v-for 迭代数字

<div id="app">
    <p v-for="count in 10">{{ count }}</p>
</div>

2.2.0+ 的版本里,当在组件上使用 v-for 时,key 现在是必须的。

不自动将 item 注入到组件里的原因是,这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

本文链接:https://www.debuginn.cn/4416.html

本文采用CC BY-NC-SA 3.0 Unported协议进行许可,转载请保留此文章链接

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 玩转webpack之loader开发

    webpack提倡一切皆模块,所有类型的文件都可以经过文件加载器处理变成我们可加载的模块,那么这个文件加载器便是loader。

    IMWeb前端团队
  • 前端工程师征服树形组件的秘籍

    组件已经好了,如果我们要点击,我们怎么知道哪个层级的哪个节点被点了呢?是不是会写一个搜索算法,传入当前节点id,然后回溯去记录路径展示出来?这虽然可以做到,但显...

    IMWeb前端团队
  • UWP 转换 IBuffer 和其他类型

    本文告诉大家在 UWP 如何转换 IBuffer 为 string 和 stream 类

    林德熙
  • 私密密码本 2.1 源代码

    文件存放的方式是在一个文件夹里存放文件 data.data 用于记录所有存放的文件的顺序

    林德熙
  • js逆向之mytoken热搜榜

    币圈的同学应该都听说过MyToken,其中最有价值的就是他的热搜榜。与其每天盯盘炒币,不如写一个脚本抓取它热搜榜数据。

    Python编程与实战
  • 政策驱动的持续集成?

    关于OPA(Open Policy Agent,开放政策代理),我最喜欢的一点是它可以与其他系统互操作。任何生成JSON的东西 — 现在大多数系统都可以 — 都...

    CNCF
  • 携程酒店真实房价抓取

    携程的反爬机制有点让人害怕,当某些参数不对的时候,直接返回的房价价格比实际价格要高,这也可以当作“千人千面”吧。

    Python编程与实战
  • TiKV源码解析系列文章(十五)表达式计算框架

    上一篇 《TiKV 源码解析系列文章(十四)Coprocessor 概览》讲到了 TiDB 为了最大化利用分布式计算能力,会尽量将 Selection 算子、聚...

    CNCF
  • 聊一聊相等运算与 SameValue

    SameValue 与 SameValueZero 其实是 ecma 中,比较值是否相等的算法,具体参考如下:

    IMWeb前端团队
  • 超详细的字符串用法大全

    运行结果:['ab', 'fd', 'ft', 'fs', 'f', 'df', 'fss', 'dfd', 'fs', 'uu', 'fsd']

    Python编程与实战

扫码关注云+社区

领取腾讯云代金券